import BaseCard from '@elements/BaseCard/index.vue';
import BaseSelect from '@elements/BaseSelect/index.vue';
import BaseButton from '@elements/BaseButton/index.vue';
import ListTypeOfBannerSecundary from './index.vue';
import store from '../../../GlobalContextStore/GlobalContexts';
import draggable from 'vuedraggable';
import { v4 as uuidv4 } from 'uuid';
import { ToggleButton } from 'vue-js-toggle-button';
import Vue from 'vue';
import axios from "axios";

Vue.component('ToggleButton', ToggleButton);

export default {
  name: 'ListTypeOfBannerSecundary',
  components: {
    BaseButton,
    BaseSelect,
    draggable,
    ListTypeOfBannerSecundary,
    BaseCard,
  },
  data() {
    return {
      bannersData: {},
      firstModuleOnBannerBaseModule: [],
      bannersSelected: [],
      setHintBanner: store.state.setHint,
      objectSupportWithDynamicUpdate: {
        banner_id: '',
        category_id: '',
        height: '',
        index: '',
        layout_id: '',
        new: '',
        position: '',
        show_in_subsequent_categories: '',
        sort_order: '',
        status: '',
        style: '',
        tamanho: '',
        type: '',
        uuid: '',
        width: '',
      },
      typeOfModule: {
        type: String,
      },
      active: {
        type: Boolean,
      },
      enableEmptyCard: false,
      setBannerLayoutName: store.state.setBannerLayoutName,
    };
  },

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

      this.enableEmptyCard = true;
      store.state.setBannerLayoutName.splice(index, 1);
      this.addCookies(DATA.banner_extensions.banners_secundaries);
    },
    addCookies(values){
      this.setCookiesAxios({secondary_banner: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'));
    },
    setScreenName(screenOfSettingsModule) {
      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);
    },

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

      if(index !== 'undefined'){
        store.state.setUpdateBanner = index;
      }

      if(condBanners.length) {
        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);
      }
    },
  },

  mounted() {

  },

  watch: {
    setHintBanner(printBannerHint) {

    },
  },

  computed: {
    imageThumbAccess() {
      return store.state.imageThumbAccess;
    },

    bannersModuleData() {
      return store.state.setBannerLayoutName;
    },
  },
};
