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 ListTypeOfMosaicSecundary from './index.vue';
import draggable from 'vuedraggable';
import { v4 as uuidv4 } from 'uuid';

export default {
  name: 'ListTypeOfBannerSecundary',
  components: {
    ListTypeOfMosaicSecundary,
    BaseButton,
    BaseSelect,
    BaseCard,
    draggable,
  },
  data() {
    return {
      name: '',
      enableEmptyCard: false,
      setCarrosselLayoutName: store.state.setMosaicLayoutName,
    };
  },

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

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

    getLanguage(label) {
      return store.state.language[label];
    },

    removeModulesWithBanner(index) {

      DATA.banner_extensions.banners_secundaries.map((bannersSecundary) => {
        if(bannersSecundary.banner_id === store.state.bannerId){
          bannersSecundary.mosaics.splice(index, 1);
        }
      });

      this.enableEmptyCard = true;
      store.state.setMosaicLayoutName.splice(index, 1);
      this.addCookies(DATA.banner_extensions.banners_secundaries);
    },
    addCookies(values){
      document.cookie = "secondary="+JSON.stringify(values)+" ";
    },

    setScreenName(screenName) {
      store.commit('setScreenName', screenName);
    },


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

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

    createNewBanner(screenOfSettingsModule) {
      store.commit('setScreenName', screenOfSettingsModule);
    },
  },

  computed: {
    handleModuleMosaic() {
      return store.state.setMosaicLayoutName;
    },
    setHintBanner() {
      return store.state.setHint;
    },
  },

  mounted() {},
};
