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

export default {
  name: 'MainBannerPage',
  components: {
    BaseButton,
    BaseCard,
    BaseSelect,
    BannerDynamic,
    draggable,
    BaseInput: () => import(/* webpackChunkName: "BaseInput" */ '@elements/BaseInput/index.vue'),
  },
  data() {
    return {
      dynamicBanner: [],
      nameOfDynamicBanners: [],
    };
  },
  methods: {
    addCookies(values){
      document.cookie = "dinamico="+JSON.stringify(values)+" ";
    },
    removeIndexData(uuidv4ProviderWithDelete, bannerIndex) {

      this.nameOfDynamicBanners.splice(bannerIndex, 1);
      DATA.banner_extensions.banner_homepage.banner_dinamico.splice(bannerIndex, 1);

      this.addCookies(DATA.banner_extensions.banner_homepage.banner_dinamico);
    },

    setDynamicDataWithRelationOnSettingsPage(banner_dinamico_analyze_id) {
      this.dynamicBanner.map((searchBannerDataByUUIDv4Provider, __) => {
        if(searchBannerDataByUUIDv4Provider.banner_dinamico_analyze_id === banner_dinamico_analyze_id) {
          store.commit('setDynamicBannerHomePageData', searchBannerDataByUUIDv4Provider);
        }
      });
    },
    getLanguage(label){
      return store.state.language[label];
    },
    flagprimaryDynamic(flag){
      if(flag === 'create'){
        store.state.dynamicBannerHomePageData = [];
      }
      store.state.flagprimaryDynamic = flag;
    },
    setDynamicBannerInformation() {

      const setIdProvider = uuidv4();
      DATA.banner_extensions.banner_homepage.banner_dinamico.map(allDynamicBanners => {
        this.dynamicBanner.push({
          banner_dinamico_analyze_id: allDynamicBanners.banner_dinamico_analyze_id ? allDynamicBanners.banner_dinamico_analyze_id : uuidv4(),
          banner_dinamico_date_end: allDynamicBanners.banner_dinamico_date_end,
          banner_dinamico_date_initial: allDynamicBanners.banner_dinamico_date_initial,
          banner_dinamico_model: allDynamicBanners.banner_dinamico_model,
          banner_dinamico_ordem: allDynamicBanners.banner_dinamico_ordem,
          banner_dinamico_quantidade: allDynamicBanners.banner_dinamico_quantidade,
          banner_dinamico_tipolista: allDynamicBanners.banner_dinamico_tipolista,
          banner_group_order: allDynamicBanners.banner_group_order,
          new: allDynamicBanners.new,
        });

        this.nameOfDynamicBanners.push({
          dataBanner: this.dynamicBanner,
          layoutNames: DATA.Type_ModulesListBanner[allDynamicBanners.banner_dinamico_tipolista],
        });
      });

      DATA.banner_extensions.banner_homepage.banner_dinamico = this.dynamicBanner;
      store.state.jsonBannersMounted.banner_dinamico = this.dynamicBanner;
    },

    setDynamicBannerConfiguration(screenDynamicBanner) {
      store.commit('setScreenName', screenDynamicBanner);
    },

    addNewDynamicBanner() {
      this.nameOfDynamicBanners.push(store.state.setNewDynamicBanner.banner_dinamico_tipolista);
    },
  },

  mounted() {
    this.setDynamicBannerInformation();
  },

  computed: {
    getNameOfDynamicBanners() {
      return this.nameOfDynamicBanners;
    },
  },
};
