import store from '@assets/components/components/banners/GlobalContextStore/GlobalContexts';
import BaseButton from '@elements/BaseButton/index.vue';
import BaseCard from '@elements/BaseCard/index.vue';
import BannerHomePage from './index.vue';
import draggable from 'vuedraggable';
import { v4 as uuidv4 } from 'uuid';
import { isUuid } from 'uuidv4';
import axios from "axios";

export default {
  name: 'BannerHomePage',
  components: {
    BannerHomePage,
    BaseCard,
    BaseButton,
    draggable,
  },
  props: {
    text_banner_pages: {
      type: String,
      default: 'Banner - Página Principal',
    },
    text_disable: {
      type: String,
      default: 'Desabilitado',
    },
    text_enable: {
      type: String,
      default: 'Habilitado',
    },
    bannerIsActive: {
      type: Boolean,
      default: true,
    },
    bannerIsDeleted: {
      type: Boolean,
    },
    iconTrash: {
      type: String,
      default: 'fas fa-trash',
    },
  },
  data() {
    return {

      banner_image: [
        // {
        //   analyze: {
        //     type: String,
        //   },
        //   analyze_id: {
        //     type: String,
        //   },
        //   quantity: {
        //     type: String,
        //   },
        //   banner_group_order: {
        //     type: String,
        //   },
        //   banner_image_description: [
        //     {
        //       title: {
        //         type: String,
        //       },
        //     },
        //   ],
        //   banner_order: {
        //     type: Number,
        //   },
        //   date_end: {
        //     type: String,
        //   },
        //   date_initial: {
        //     type: String,
        //   },
        //   image: {
        //     type: String,
        //   },
        //   image_responsive: {
        //     type: String,
        //   },
        //   link: {
        //     type: String,
        //   },
        //   new: {
        //     type: String,
        //   },
        //   target: {
        //     type: String,
        //   },
        //   thumb: {
        //     type: String,
        //   },
        //   thumb_responsive: {
        //     type: String,
        //   },
        // },
      ],
      banner_image_home_page: [],
      banner_analyze_id: '',
      defineFlagMethodState: '',
    };
  },
  methods: {
    setMethodEditionAndCreate(defineFlagMethod) {
      this.defineFlagMethodState = defineFlagMethod;
      store.commit('setFlagMethodEditCreate', this.defineFlagMethodState);
    },

    createNewBannerImageModule() {
      const support_analyzeId = uuidv4();
      store.commit('setUUIDbannerImage', support_analyzeId);

      this.banner_image.push({
        analyze: '',
        analyze_id: support_analyzeId,
        quantity: '',
        banner_group_order: '',
        banner_image_description: { '1':{title: ''} },
        banner_order: '',
        date_end: '',
        date_initial: '',
        image: '',
        image_responsive: '',
        link: '',
        new: '',
        target: '',
        thumb: '',
        thumb_responsive: '',
      });

      store.commit('setBannerImageAllData', [...this.banner_image]);
    },

    setBannerImageByAnalyzeId(analyze_id_banner_image) {
      DATA.banner_extensions.banner_homepage.banner_image.map((bannerImageCallback, __) => {
        if (bannerImageCallback.analyze_id === analyze_id_banner_image) {
          this.banner_image_home_page.push({
            banner_image_description: bannerImageCallback.banner_image_description,
            banner_group_order: bannerImageCallback.banner_group_order,
            image_responsive: bannerImageCallback.image_responsive,
            thumb_responsive: bannerImageCallback.thumb_responsive,
            quantity: bannerImageCallback.quantity,
            date_initial: bannerImageCallback.date_initial,
            banner_order: bannerImageCallback.banner_order,
            analyze_id: bannerImageCallback.analyze_id,
            date_end: bannerImageCallback.date_end,
            analyze: bannerImageCallback.analyze,
            target: bannerImageCallback.target,
            image: bannerImageCallback.image,
            thumb: bannerImageCallback.thumb,
            link: bannerImageCallback.link,
            new: bannerImageCallback.new,
          });

          store.commit('setAnalyzeIdbannerImage', analyze_id_banner_image);
          store.commit('setBannerImageData', this.banner_image_home_page);
        }
      });
    },

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

      //Deletar Array de comunicação DATA (Back-End)
      DATA.banner_extensions.banner_homepage.banner_image.map((searchAnalyze_idForDelete, index) => {
        if(searchAnalyze_idForDelete.analyze_id === analyze_id) {
          DATA.banner_extensions.banner_homepage.banner_image.splice(index, 1);
        }
      });

      this.addCookies(DATA.banner_extensions.banner_homepage.banner_image)
    },
    addCookies(values){
      this.setCookiesAxios({imagem: 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'));
    },
    setBannerHomePageInformations() {
      if (store.state.bannerImageAllDataClone.length === 0) {
        DATA.banner_extensions.banner_homepage.banner_image.map(bannerImagesCallback => {
          this.banner_image.push({
            analyze: bannerImagesCallback.analyze,
            analyze_id: bannerImagesCallback.analyze_id,
            quantity: bannerImagesCallback.quantity,
            banner_group_order: bannerImagesCallback.banner_group_order,
            banner_image_description: bannerImagesCallback.banner_image_description,
            banner_order: bannerImagesCallback.banner_order,
            date_end: bannerImagesCallback.date_end,
            date_initial: bannerImagesCallback.date_initial,
            image: bannerImagesCallback.image,
            image_responsive: bannerImagesCallback.image_responsive,
            link: bannerImagesCallback.link,
            new: bannerImagesCallback.new,
            target: bannerImagesCallback.target,
            thumb: bannerImagesCallback.thumb,
            thumb_responsive: bannerImagesCallback.thumb_responsive,
          });
        });
      }

      store.state.bannerImageAllDataClone.map(bannerImagesCallback => {
        this.banner_image.push(bannerImagesCallback);
      });
    },

    handleOpenImageOnList(screenImageName, analyze_id) {
      store.commit('setScreenName', screenImageName);
      store.commit('setAnalyzeIdIntoBannerImage', analyze_id);
    },

    onRemoveBannerLayout(key, index) {
      this.bannerIsDeleted = true;
    },
    getLanguage(label){
      return store.state.language[label];
    },
  },

  updated(){
    this.banner_image.map((value, key ) => {
      value.banner_order = key;
    });

    DATA.banner_extensions.banner_homepage.banner_image = this.banner_image;
    store.state.jsonBannersMounted.banner_image = this.banner_image;
  },

  computed: {
    dragOptions() {
      return {
        animation: 200,
        ghostClass: 'shadow-large',
      };
    },
    bannerImageAllData() {
      return store.state.bannerImageAllData;
    },
  },

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