import store from '../../GlobalContextStore/GlobalContexts';
import BaseButton from '@elements/BaseButton/index.vue';
import BaseCard from '@elements/BaseCard/index.vue';
import ListProductsConfiguration from './index.vue';
import draggable from 'vuedraggable';
import {v4 as uuidv4} from "uuid";

export default {
  name: 'ListProductsConfiguration',
  components: {
    BaseCard,
    draggable,
    BaseButton,
    ListProductsConfiguration,
  },
  props: {
    text_product_banner: {
      type: String,
    },
    text_disable: {
      type: String,
      default: 'Desabilitado',
    },
    text_enable: {
      type: String,
      default: 'Habilitado',
    },
  },
  data() {
    return {
      observerBannerProduct: [],
      bannerProduct: [
        {
          analyze: '',
          analyze_id: '',
          quantity: '',
          banner_group_order: '',
          banner_model: '',
          banner_order: 0,
          banner_product_description: {
            1: {
              title: ''
            }
          },
          date_end: '',
          date_initial: '',
          image: '',
          new: '',
          product_id: '',
          thumb: '',
        },
      ],
    };
  },
  methods: {
    setDisplayNameScreen(screenName) {
      store.commit('setScreenName', screenName);
    },

    setFlagCmpOrEdit(flag) {
      store.commit('defineFlagCreateNewProduct', flag);
    },

    getUUIDProviderWithDeleteProduct(analyze_id) {

      // É necessário deletar do array de renderização (Front-End)
      this.bannerProduct.map((searchAnalyze_idWithDeleteProduct, index) => {
        if(searchAnalyze_idWithDeleteProduct.analyze_id === analyze_id) {
          this.bannerProduct.splice(index, 1);
        }
      })

      //Deletar Array de comunicação DATA (Back-End)
      DATA.banner_extensions.banner_homepage.banner_product.map((searchAnalyze_idWithDeleteProduct, index) => {
        if(searchAnalyze_idWithDeleteProduct.analyze_id === analyze_id) {
          DATA.banner_extensions.banner_homepage.banner_product.splice(index, 1);
        }
      });
      this.addCookies(DATA.banner_extensions.banner_homepage.banner_product);
    },
    addCookies(values){
      document.cookie = "produto="+JSON.stringify(values)+" ";
    },
    getBannersForConfiguration() {
      DATA.banner_extensions.banner_homepage.banner_product.map(data => this.bannerProduct.push(data));
      store.commit('setBannerProductId', this.observerBannerProduct.analyze_id);
    },

    getProductInformationById(analyze_id) {
      this.bannerProduct.map(productInformation => {
        if (productInformation.analyze_id === analyze_id) {
          store.commit('setBannerProductId', analyze_id);
        }
      });
    },
    getLanguage(label){
      return store.state.language[label];
    },
  },

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