import $ from 'jquery';
import store from 'store';

const pascalToKebab = (pascalCaseString) => {
  return pascalCaseString.replace(/\.?([A-Z])/g, (_, y) => `-${y.toLowerCase()}`).slice(1);
}

class WidgetComponent {
  constructor({ el = null, props = {} }) {
    if (!this.widget) throw new Error('To create a component, the superclass needs a reference to AMO widget instance');

    Object.assign(this, { ...$(el).data(), ...props });

    this.el = el;
    this.$el = null;

    setTimeout(() => this.run());
  }

  get widget() {
    return this.constructor.widget || null;
  }

  get store() {
    return store;
  }

  get localStorage() {
    return this.widget ? this.widget.localStorage : null;
  }

  async run() {
    $(this.el).children().hide();

    try {
      // Method always should to return promise
      if (this.init) await this.init();

      // Method always should to return promise
      if (this.beforeRender) await this.beforeRender();

      this.render();

      if (this.rendered) this.rendered();

      this.bindEventHandlers();
    } catch (error) {
      $(this.el).text('Подключите канал WhatsApp Business API для работы с виджетом');
      throw error;
    }
  }

  compileTemplate(variables = {}) {
    return this.widget.render({ data: this.constructor.template }, variables);
  }

  render() {
    const compiledTemplate = this.compileTemplate();
    const $el = $(compiledTemplate);

    $(this.el).replaceWith($el);

    this.$el = $el;
    this.el = null;
  }

  bindEventHandlers() {
    if (!this.beforeDestroy) return;

    const onBeforeunload = () => this.beforeDestroy();

    this.$el.on("remove", () => {
      this.beforeDestroy();
      $(window).off('beforeunload', onBeforeunload);
    });

    $(window).on('beforeunload', onBeforeunload);
  }

  static get template() {
    return '<div>Component template not defined</div>';
  }

  static get tagName() {
    return `tb-${pascalToKebab(this.name)}`;
  }

  static setWidgetCtx(widget) {
    this.widget = widget;
  }
}


export default WidgetComponent;