import $ from 'jquery';
import Modal from 'lib/components/base/modal';

import api from 'api';

import WidgetComponent from 'components/WidgetComponent';
import WabaTimers from 'components/WabaTimers/WabaTimers';
import LeadCardWabaTemplatesForm from 'components/LeadCardWabaTemplatesForm/LeadCardWabaTemplatesForm';
import SalesbotWabaTemplatesForm from 'components/SalesbotWabaTemplatesForm/SalesbotWabaTemplatesForm';

import './css/main.scss';

const RIGHT_COLUMN_CSS_CLASS_NAME = 'tb-amo-right-column';

export default function TbAmoWidget() {
  const self = this;

  self.localStorage = {
    get storageId() {
      return `tb_widget_${self.params.widget_code}`;
    },

    getStorage() {
      const serializedStorage = localStorage.getItem(this.storageId);

      if (!serializedStorage) return null;

      try {
        return JSON.parse(serializedStorage);
      } catch (error) {
        return null;
      }
    },

    setItem(key, value) {
      const storage = this.getStorage() || {};

      storage[key] = value;
      localStorage.setItem(this.storageId, JSON.stringify(storage));
    },

    getItem(key) {
      const storage = this.getStorage();

      if (!storage) return null;

      return storage[key];
    }
  };

  self.showSuccess = (text) => {
    new Modal().showSuccess(text);
  };

  self.showError = (text) => {
    new Modal({
      class_name: 'tb-amo-modal-error',
      init_animation: true,
      init: function ($modal_body) {
        $modal_body
          .trigger('modal:loaded')
          .trigger('modal:centrify')
          .html(text || 'Упс! Что-то пошло не так')
          .append('<span class="modal-body__close"><span class="icon icon-modal-close"></span></span>');
      },
      destroy: function () {

      }
    });
  };

  self.connectIntegration = function (tbApiToken) {
    return api.getIntegrationConfig()
      .then(() => {
        throw new Error('У вас уже подключена интеграция TextBack');
      })
      .catch((error) => {
        if (error.response && error.response.status === 404) {
          return api.createIntegrationConfig(tbApiToken);
        }

        throw error;
      })
      .catch((error) => {
        if (error.response && error.response.status === 401) {
          throw new Error('Некорректный API токен TextBack');
        }

        throw error;
      })
      .then(() => self.showSuccess('Интеграция подключена'))
      .catch(({ response, message }) => {
        if (response) {
          self.showSuccess('Не удалось подключить интеграцию');
        } else {
          self.showError(message)
        }
      });
  }

  self.destroyIntegration = function () {
    return api.deleteIntegrationConfig()
      .then(() => self.showSuccess('Интеграция отключена'))
      .catch(({ response }) => {
        if (response && response.status === 404) return;

        self.showError('"Не удалось отключить интеграцию TextBack"');
      })
  };

  self.renderRightColumn = function () {
    const captionCssClassName = `${RIGHT_COLUMN_CSS_CLASS_NAME}__caption`;

    self.render_template({
      caption: {
        class_name: captionCssClassName,
      },
      body: '',
      render: `<${LeadCardWabaTemplatesForm.tagName} />`,
    });

    const $rightColumnCaption = $(`.${captionCssClassName}[data-code="${self.params.widget_code}"]`);
    const $rightColumn = $rightColumnCaption.parent();

    $rightColumn
      .addClass(RIGHT_COLUMN_CSS_CLASS_NAME)
      .find('.card-widgets__widget__body')
      .addClass(`${RIGHT_COLUMN_CSS_CLASS_NAME}__body`);

    if (process.env.DEV) {
      const captionText = `${process.env.RELEASE ? ' release' : 'local'} dev`;

      $rightColumnCaption.attr('data-caption-text', `${captionText}`);
    }
  }

  /* ********************** Widget callbacks ********************** */
  this.callbacks = {
    render() {
      if (self.system().area === 'lcard') {
        self.renderRightColumn();

        $('#contacts_list .js-control-phone > input').each((i, phoneInputEl) => {
          const $phoneInput = $(phoneInputEl)
          const phoneInputTextHasNumber = /.*[0-9].*/.test($phoneInput.val())

          if (!phoneInputTextHasNumber) return;

          const $container = $phoneInput.closest('.linked-form__field__value');

          $(`<${WabaTimers.tagName} />`)
            .data('$phoneInput', $phoneInput)
            .attr('data-code', self.params.widget_code)
            .appendTo($container);
        });
      }

      return true;
    },

    bind_actions() {
      return true;
    },

    init() {
      WidgetComponent.setWidgetCtx(self);

      if (self.system().area === 'lcard') {
        const widgetCodeAttributeSelector = `[data-code="${self.params.widget_code}"]`;

        const $rightColumnWidgetSection = $(
          `.${RIGHT_COLUMN_CSS_CLASS_NAME + widgetCodeAttributeSelector} ${LeadCardWabaTemplatesForm.tagName}`
        );

        new LeadCardWabaTemplatesForm({ el: $rightColumnWidgetSection });

        const wabaTimersComponentSelector = WabaTimers.tagName + widgetCodeAttributeSelector;

        $(wabaTimersComponentSelector).each((_, el) => new WabaTimers({ el }));
      }

      return true;
    },

    settings($modal_body) {
      // TODO: Turn this into a component

      const $instructionContainer = $modal_body.find('.widget_settings_block__descr');
      const $agreementField = $modal_body.find('input[name="agreement"]');
      const $controlsContainer = $modal_body.find('.widget_settings_block__controls');

      const $agreementContainer = $(
        '<div class="tb-amo-agreement">\
            <label>\
              <input type="checkbox" name="agreement_check" />\
              Согласен на передачу данных своего аккаунта amoCRM (API-ключ и адрес аккаунта) компании TextBack\
            </label>\
          </div>'
      );

      $agreementField.val('');
      $modal_body.addClass('tb-amo-widget');

      $instructionContainer
        .html(self.i18n('widget.instruction'))
        .addClass('tb-amo-instruction');

      $agreementContainer
        .find('input[name="agreement_check"]')
        .change(function (e) {
          const $checkbox = $(e.currentTarget);

          $agreementField.val($checkbox.prop('checked') ? '1' : '');
        });

      $controlsContainer.before($agreementContainer);

      return true;
    },

    onSave({ active, fields }) {
      if (active === 'Y') {
        self.connectIntegration(fields.api_key);
      }

      if (active === 'N') {
        self.destroyIntegration();
      }

      return true;
    },

    destroy() { },

    onSalesbotDesignerSave(_, params) {
      try {
        const stepJson = SalesbotWabaTemplatesForm.generateStepJson(params);
        // stepJson.exits = [
        //   { code: 'success', title: 'При успешном выполнении' },
        //   { code: 'fail', title: 'При ошибке' }
        // ];
    
        return JSON.stringify(stepJson); 
      } catch (error) {
        self.showError(error.message);
        throw error;
      }
    },





    salesbotDesignerSettings($body, _, params) {
      new SalesbotWabaTemplatesForm({ el: $body, params: params.params.params.params });
      // return {
      //   exits: [
      //     { code: 'success', title: 'При успешном выполнении' },
      //     { code: 'fail', title: 'При ошибке' }
      //   ]
      // };
    },

    onAddAsSource() {
      api.addWidgetAsSource(self.params.widget_code);
    },


  };


  return this;
};