import store from '../../../GlobalContextStore/GlobalContexts';
import BaseSelect from '@elements/BaseSelect/index.vue';
import BaseButton from '@elements/BaseButton/index.vue';
import formMixin from '@mixins/formMixin';
import BaseCard from '@elements/BaseCard/index.vue';
import BannerDynamicConfiguration from './index.vue';
import draggable from 'vuedraggable';

import { ValidationObserver, ValidationProvider } from 'vee-validate';

export default {
  name: 'MainBannerPage',
  components: {
    BaseButton,
    BaseCard,
    BaseSelect,
    draggable,
    BannerDynamicConfiguration,
    BaseInput: () => import(/* webpackChunkName: "BaseInput" */ '@elements/BaseInput/index.vue'),
    ValidationObserver,
    ValidationProvider,
  },
  mixins: [formMixin],
  data() {
    return {
      bannerModel: [],
      initialDate: '',
      ImageThumb: store.state.imageThumb,
      Type_ModulesListBanner: DATA.Type_ModulesListBanner,
      Type_ModelBannerProduct: DATA.Type_ModelBannerProduct,
      finalDate: '',
      modulesListBanner: [],
      setModelBanner: [],
      banner_dinamico: {
        banner_dinamico_analyze_id: '',
        banner_dinamico_date_end: '',
        banner_dinamico_date_initial: '',
        banner_dinamico_model: '',
        banner_dinamico_ordem: '1',
        banner_dinamico_quantidade: '',
        banner_dinamico_tipolista: '',
        banner_group_order: '0',
        new: 'true',
      },
      modelBannerMounted: [],
      banner_dinamico_analyze_id: store.state.dynamicBannerHomePageData.banner_dinamico_analyze_id,
      banner_dinamico_date_end: store.state.dynamicBannerHomePageData.banner_dinamico_date_end,
      banner_dinamico_date_initial: store.state.dynamicBannerHomePageData.banner_dinamico_date_initial,
      banner_dinamico_model: store.state.dynamicBannerHomePageData.banner_dinamico_model,
      banner_dinamico_ordem: store.state.dynamicBannerHomePageData.banner_dinamico_ordem,
      banner_dinamico_quantidade: store.state.dynamicBannerHomePageData.banner_dinamico_quantidade,
      banner_dinamico_tipolista: store.state.dynamicBannerHomePageData.banner_dinamico_tipolista,
      banner_group_order: store.state.dynamicBannerHomePageData.banner_group_order,
      new: store.state.dynamicBannerHomePageData.new,
    };
  },
  methods: {
    setBannerModel() {
      this.bannerModel.push(Object.keys(DATA.Type_ModelBannerProduct));
    },

    setModel(modelName) {
      this.banner_dinamico.banner_dinamico_model = modelName;
    },

    setOrderData(orderData) {
      this.banner_dinamico.banner_dinamico_ordem = orderData;
    },

    setAmount(amount) {
      this.banner_dinamico.banner_dinamico_quantidade = amount;
    },

    setTypeList(typeList) {
      this.banner_dinamico.banner_dinamico_tipolista = typeList;
    },

    setNewTag(newTagBanner) {
      store.commit('setNewTag', 'true');
    },

    setInitialDate(initialDate) {
      this.banner_dinamico.banner_dinamico_date_initial = initialDate;
    },

    setFinalDate(finalDate) {
      this.banner_dinamico.banner_dinamico_date_end = finalDate;
    },

    setModulesListBanner() {
      this.modulesListBanner.push(Object.keys(DATA.Type_ModulesListBanner));
    },

    setDynamicBannerConfiguration(screenDynamicBanner) {
      store.commit('setScreenName', screenDynamicBanner);
    },
    addModifications(){
      let dinamico = [];

      if(store.state.flagprimaryDynamic == 'create'){
        if (store.state.setNewDynamicBanner.banner_dinamico_tipolista === '') {
          store.commit('setTypeList', Object.keys(this.Type_ModulesListBanner)[0]);
        }
        dinamico = store.state.jsonBannersMounted.banner_dinamico;
        dinamico.push({
          'banner_dinamico_analyze_id' : this.banner_dinamico_analyze_id,
          'banner_dinamico_date_end': this.banner_dinamico_date_end,
          'banner_dinamico_date_initial': this.banner_dinamico_date_initial,
          'banner_dinamico_model': this.banner_dinamico_model,
          'banner_dinamico_ordem': this.banner_dinamico_ordem,
          'banner_dinamico_quantidade': this.banner_dinamico_quantidade,
          'banner_dinamico_tipolista': this.banner_dinamico_tipolista,
          'banner_group_order':this.banner_group_order,
          'new': this.new
        });
      }else{
        store.state.jsonBannersMounted.banner_dinamico.map((value) => {
          if(this.banner_dinamico_analyze_id === value.banner_dinamico_analyze_id){
            dinamico.push({
              'banner_dinamico_analyze_id' : this.banner_dinamico_analyze_id,
              'banner_dinamico_date_end': this.banner_dinamico_date_end,
              'banner_dinamico_date_initial': this.banner_dinamico_date_initial,
              'banner_dinamico_model': this.banner_dinamico_model,
              'banner_dinamico_ordem': this.banner_dinamico_ordem,
              'banner_dinamico_quantidade': this.banner_dinamico_quantidade,
              'banner_dinamico_tipolista': this.banner_dinamico_tipolista,
              'banner_group_order':this.banner_group_order,
              'new': this.new
            })
          }else{
            dinamico.push(value);
          }
        })
      }

      store.state.jsonBannersMounted.banner_dinamico = dinamico;
      DATA.banner_extensions.banner_homepage.banner_dinamico = dinamico;

      this.addCookies(dinamico);
      store.commit('setScreenName', 'HomePage');
    },
    addCookies(values){
      document.cookie = "dinamico="+JSON.stringify(values)+" ";
    },
    createNewDynamicModel() {
      this.$refs.validationObserver.validate().then(valid => {
        if (valid) {
          this.addModifications();
        }else{
          notificationMsg(this.getLanguage('text_error_validate'),'error');
        }
      });
    },

    onClickBackToHomePage(screenName) {
      store.commit('setScreenName', screenName);
    },
    getLanguage(label){
      return store.state.language[label];
    },
    onFinalDate(value) {
      if (value.length > 9) {
        const [day, month, year] = value.split('/');
        const date = new Date(year + '-' + month + '-' + (day)+'T21:00:00');
        const finalDate = new Date();
        if(date < finalDate) {
          notificationMsg(this.getLanguage('error_dataMax'), 'warning');
        }
      }
    },
    disabledFinalDate(date) {
      const disabledFinalDate = new Date(date.getTime() + 0 * 24 * 3600 * 1000);
      return disabledFinalDate < new Date(new Date().setHours(0, 0, 0, 0));
    },
  },
  mounted() {
    this.disableSubmitButton = true;
    this.setBannerModel();
  },
};
