jQuery(window).on('elementor/frontend/init', () => {
  const $ = jQuery;

  function removeSpaces(string) {
    return String(string).replace(/ /g, '__');
  }

  if (typeof elementor === 'undefined') {
    return;
  }

  elementor.hooks.addAction('panel/open_editor/widget', function (panel, model, view) {
    var $tabsDataContentItemsTabSelect = panel.$el.find('.tabs_data_content_items');

    if (
      !model ||
      !model.attributes ||
      !model.attributes.widgetType ||
      model.attributes.widgetType !== 'bb-dls-tabs-with-cards'
    ) {
      $tabsDataContentItemsTabSelect.unbind('focus');
      return;
    }

    // atualiza os valores iniciais
    if (
      model &&
      model.attributes &&
      model.attributes.settings &&
      model.attributes.settings._previousAttributes
    ) {
      // console.log(model.attributes.settings._previousAttributes);
      const valoresIniciaisItems =
        model.attributes.settings._previousAttributes.dataContentItems || [];
      const tabsArrInicial = model.attributes.settings.attributes.dataContent.models;
      $tabsDataContentItemsTabSelect.find('.elementor-repeater-fields').each(function () {
        const valorAnterior = valoresIniciaisItems.find(
          (vB) =>
            vB.title === $(this).find('.elementor-repeater-row-item-title').text()
        );
        const currentVal = valorAnterior ? valorAnterior.tabName : '';
        let html = '<option value>Selecione</option>';
        tabsArrInicial.forEach(function (tabModel) {
          const title = tabModel.attributes.label;
          const value = tabModel.attributes._id;
          const selected =
            currentVal === value ? 'selected="selected"' : '';
          html +=
            '<option ' +
            selected +
            ' value=' +
            value +
            '>' +
            title +
            '</option>';
        });
        $(this).find('.tab_select select').html(html);
      });
    }

    $tabsDataContentItemsTabSelect.unbind('focus');
    $tabsDataContentItemsTabSelect.on('focus', '.tab_select select', function () {
      const tabsArr = model.attributes.settings.attributes.dataContent.models;
      const currentVal = $(this).val();
      let html = '<option value>Selecione uma Tab</option>';
      tabsArr.forEach(function (tabModel) {
        const title = tabModel.attributes.label;
        const value = tabModel.attributes._id;
        const selected = currentVal === value ? 'selected="selected"' : '';
        html +=
          '<option ' +
          selected +
          ' value=' +
          value +
          '>' +
          title +
          '</option>';
      });
      $(this).html(html);
    });
  });
});