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';
import axios from "axios";

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){
      this.setCookiesAxios({dinamico:JSON.stringify(values)})
    },
    setCookiesAxios($object){
      axios({
        headers: {
          'content-type': 'application/x-www-form-urlencoded'
        },
        method: 'post',
        url: DATA.cached,
        data: window.objectToParam($object),
      })
        .then((response) => {
        })
        .catch(()=>console.log('erro'));
    },
    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 => {
        let UUID = allDynamicBanners.banner_dinamico_analyze_id ? allDynamicBanners.banner_dinamico_analyze_id : uuidv4();
        this.dynamicBanner.push({
          banner_dinamico_analyze_id: UUID,
          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,
          banner_dinamico_analyze_id: UUID,
          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();
  },

  updated(){
    let bannersOrder = [];

    if( this.nameOfDynamicBanners){
      this.nameOfDynamicBanners.map((value, key ) => {
        DATA.banner_extensions.banner_homepage.banner_dinamico.map((valueData) => {
          if(valueData.banner_dinamico_analyze_id === value.banner_dinamico_analyze_id){
            valueData.banner_dinamico_ordem = key;
            bannersOrder.push(valueData);
          }
        })
      });

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

  computed: {
    dragOptions() {
      return {
        animation: 200,
        ghostClass: 'shadow-large',
      };
    },
    getNameOfDynamicBanners() {
      return this.nameOfDynamicBanners;
    },
  },
};
