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

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: [],
    };
  },
  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){
      this.setCookiesAxios({produto: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'));
    },
    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];
    },
  },
  computed:{
    dragOptions() {
      return {
        animation: 200,
        ghostClass: 'shadow-large',
      };
    },
  },
  updated(){
    this.bannerProduct.map((value, key ) => {
      value.banner_order = key;
    });

    DATA.banner_extensions.banner_homepage.banner_product = this.bannerProduct;
    store.state.jsonBannersMounted.banner_product = this.bannerProduct;
  },
  mounted() {
    this.getBannersForConfiguration();
  },
};
