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';

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){
      document.cookie = "imagem="+JSON.stringify(values)+" ";
    },
    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];
    },
  },

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

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