import AdmVue from '@assets/js/adm-vue';
import initVue from '@assets/js/initVue';

const vm = new AdmVue({
  components: {
    BaseCard: () => import(/* webpackChunkName: "BaseCard" */ '@elements/BaseCard/index.vue'),
    BaseTabs: () => import(/* webpackChunkName: "BaseTabs" */ '@components/BaseTabs/index.vue'),
    BaseButton: () => import(/* webpackChunkName: "BaseButton" */ '@elements/BaseButton/index.vue'),
    BaseSelectSearch: () => import(/* webpackChunkName: "BaseSelectSearch" */ '@elements/BaseSelectSearch/index.vue'),
  },
  data() {
    return {
      configurations: {
        special_action_title: '',
        special_action_item: '',
        special_action_module: [],
        special_action_promotions_selected: [],
        special_action_scroll: '',
        special_action_loop: '',
        special_action_style: [],
        special_action_primary_color: '#000000',
        special_action_secondary_color: '#ffffff',
        special_action_title_color: '#000000',
        special_action_selectedStyle: '0',
      },  
      layouts: [],
      disableForm: false,
      loadingBtn: false,
      specialStyles: [],
      specialNames: {
        name: 'special_item',
      },
    };
  },
  methods: {
    convertToArray(value) {
      if (Array.isArray(value)) {
        return value;
      }

      return Object.values(value);
    },
    handleAddModuleClick() {
      let sortOrder = 0;
      const currentModule = this.convertToArray(this.configurations.special_action_module);
      const lastItemInCurrentModule = currentModule[currentModule.length - 1];

      if (lastItemInCurrentModule) {
        const { sort_order } = lastItemInCurrentModule;
        sortOrder = Number(sort_order) + 1;
      }

      currentModule.push({
        limit: '24',
        sort_order: sortOrder,
      });

      this.configurations.special_action_module = currentModule;
    },
    handleRemoveModuleClick(moduleIndex = 0) {
      const currentModule = this.convertToArray(this.configurations.special_action_module);
      const isModuleEmpty = currentModule.length <= 0;

      if (isModuleEmpty) return;

      currentModule.splice(moduleIndex, 1);
      this.configurations.special_action_module = currentModule;
    },
    handleSpecialActionProductCallback(value) {
      if (!value) return;

      const { special_action_options: allOptions = [] } = this;
      const promotionSelected = this.configurations.special_action_promotions_selected || [];

      const optionSelected = allOptions.find(item => item.id === value);
      const isAlreadySelected = promotionSelected.some(item => item.id === value);

      if (!optionSelected || isAlreadySelected) {
        return isAlreadySelected ? alert('Este produto já foi adicionado a lista!') : '';
      }

      promotionSelected.push(optionSelected);

      this.configurations.special_action_promotions_selected = promotionSelected;
      this.configurations.special_action_item = promotionSelected.map(item => item.id).toString();

      return;
    },
    handleSpecialActionProductRemove(id) {
      const { special_action_promotions_selected } = this.configurations;
      const promotionIndex = special_action_promotions_selected.findIndex(promotion => promotion.id === id);

      special_action_promotions_selected.splice(promotionIndex, 1);
      this.configurations.special_action_item = special_action_promotions_selected.map(item => item.id).toString();
    },
    onClickSetSpecialActionStyle(type) {
      this.configurations.special_action_selectedStyle = type;
    },
    setBackgroundImages() {
      DATA.special_action_styles.map((bg, index) => {
        this.specialStyles.push({
          type: bg.type,
          image: bg.image,
          name: this.specialNames.name + '_' + index,
        });
      });
    },
    handleColors(){
      this.styleElement.textContent = `
        .special-style{
          background-color: ${this.configurations.special_action_primary_color};
        }
        .special-style svg{
          fill: ${this.configurations.special_action_secondary_color};
        }
        .title-color-text{
          color: ${this.configurations.special_action_title_color} !important;
        }
      `;
    }
  },
  mounted() {
    this.setBackgroundImages();
    const styleElement = document.createElement('style');
    this.styleElement = styleElement;
    document.head.appendChild(styleElement);
    this.handleColors();
   
    if (this.configurations.special_action_item && this.special_action_options.length > 0) {
      const allItems = this.configurations.special_action_item.split(',');
      const filterPromotion = this.special_action_options.filter(option => allItems.includes(option.id));

      this.configurations.special_action_promotions_selected = filterPromotion;
    }

    if (this.configurations.special_action_module) {
      this.configurations.special_action_module = this.convertToArray(this.configurations.special_action_module).map(
        item => ({
          ...item,
          limit: item.limit || '24',
        })
      );
    }
  },
  watch: {
    'configurations.special_action_primary_color'() {
      this.handleColors();
    },
    'configurations.special_action_secondary_color'() {
      this.handleColors();
    },
    'configurations.special_action_title_color'() {
      this.handleColors();
    },
  },
});


initVue(vm);