import store from '../../../GlobalContextStore/GlobalContexts';
import BaseSelect from '@elements/BaseSelect/index.vue';
import BaseButton from '@elements/BaseButton/index.vue';
import BaseCard from '@elements/BaseCard/index.vue';
import ListTypeOfBannerSecundary from './index.vue';
import draggable from 'vuedraggable';
import { v4 as uuidv4 } from 'uuid';

export default {
  name: 'ListTypeOfCarrosselSecundary',
  components: {
    ListTypeOfBannerSecundary,
    BaseButton,
    BaseSelect,
    draggable,
    BaseCard,
  },
  data() {
    return {
      isEmptyCarrosel: false,
      bannersSection: [],
      banner: {
        type: Object,
      },
      enableEmptyCard: false,
      setCarrosselLayoutName: store.state.setCarrosselLayoutName,
    };
  },

  methods: {
    removeModulesWithBanner(banner_id) {
      DATA.banner_extensions.banners_secundaries.map((bannersSecundary, index) => {
        bannersSecundary.carousels.map((searchByBannerId, index) => {
          if (searchByBannerId.banner_id == banner_id) {
            const filterFindDelete = bannersSecundary.carousels.find(
              removeItemByIndex => removeItemByIndex.banner_id == banner_id
            );
            const bannerFiltred = bannersSecundary.carousels.splice(index, 1);
            store.state.setCarrosselLayoutName.splice(index, 1);
            this.enableEmptyCard = true;
          }
        });
      });
      this.addCookies(DATA.banner_extensions.banners_secundaries);
    },
    addCookies(values){
      document.cookie = "secondary="+JSON.stringify(values)+" ";
    },
    setScreenName(screenOfSettingsModule) {
      store.commit('setScreenName', screenOfSettingsModule);
    },

    updateSettingsBanner(screenOfSettingsModule, index) {
      let condBanners = DATA.banners.filter((banner)=> banner.banner_id === store.state.bannerId);
      if(condBanners.length) {

        if(index !== 'undefined'){
          store.state.setUpdateBanner = index;
        }
        store.commit('setScreenName', screenOfSettingsModule);
      }
    },

    setModuleType(moduleType) {
      let condBanners = DATA.banners.filter((banner)=> banner.banner_id === store.state.bannerId);
      if(condBanners.length) {
        store.commit('setModuleType', moduleType);
      }
    },

    createBanner(createFlag) {
      store.commit('createBanner', createFlag);
    },

    editBanner(editFlag) {
      store.commit('editBanner', editFlag);
    },

    addNewSettingsBannerModule() {
      const uuid = uuidv4();
      store.commit('insertNewSettingsBannerModule', uuid);
    },

    createNewBanner(screenOfSettingsModule) {
      store.commit('setScreenName', screenOfSettingsModule);
    },
    getLanguage(label) {
      return store.state.language[label];
    },
    setFlag(flag){
      let condBanners = DATA.banners.filter((banner)=> banner.banner_id === store.state.bannerId);
      if(condBanners.length) {
        store.commit('flagSecundaryBanner', flag);
      }
    },
  },

  computed: {
    handleModuleCarrousel() {
      return store.state.setCarrosselLayoutName;
    },
    setHintBanner() {
      return store.state.setHint;
    },
  },

  watch: {
    setHintBanner(printBannerHint) {

    },
  },

};
