import store from '../../../GlobalContextStore/GlobalContexts';
import BaseSelect from '@elements/BaseSelect/index.vue';
import BaseButton from '@elements/BaseButton/index.vue';
import BaseCard from '@elements/BaseCard/index.vue';
import FileManager from '@components/FileManager/index.vue';
import MosaicStyles from './index.vue';
import draggable from 'vuedraggable';

export default {
  name: 'MosaicStyles',
  components: {
    BaseModal: () => import(/* webpackChunkName: "BaseModal" */ '@components/BaseModal/index.vue'),
    FileManager,
    BaseButton,
    BaseCard,
    BaseSelect,
    BaseInput: () => import(/* webpackChunkName: "BaseInput" */ '@elements/BaseInput/index.vue'),
    MosaicStyles,
    draggable,
  },

  data() {
    return {
      imageSelected: [],
      isEdit: -1,
      imageThumb: store.state.imageThumb,
      mosaic: {
        0:{'grid-template-1': true,},
        1:{'grid-template-2': true,},
        2:{'grid-template-3': true,},
        3:{'grid-template-4': true,},
      },
      open: false,
      mosaicIndexTrumb: 0,
      mosaicStyles: [],
      mosaicNames: {
        name: 'mosaic_item',
      },
      mosaicActive: {
        type: Number,
      },
      mosaicSelectedIndexName: '',
      imageMosaicThumb: [
        { id: 0, link: '' },
        { id: 1, link: '' },
        { id: 2, link: '' },
        { id: 3, link: '' },
        { id: 4, link: '' },
        { id: 5, link: '' }
      ],
      galleryImages: 'galleryImage',
      numberIndex: 0,
    };
  },

  methods: {
    getLanguage(label){
      return store.state.language[label];
    },

    setBannerImagesMosaics() {
      DATA.mosaic_styles.map((mosaic, index) => {
        this.mosaicStyles.push({
          type: mosaic.type,
          image: mosaic.image,
          name: this.mosaicNames.name + '_' + index,
        });
      });
    },
    removeImgBanner(key){

      store.state.imageThumb[key].thumb = '../image/data/preview-product.png';
      store.state.imageThumb[key].image = 'data/preview-product.png';
    },
    onClickSetMosaicStyle(styleName) {
      store.state.bannersData.mosaic_style = styleName;
      this.mosaicSelectedIndexName = styleName;
    },

    setMosaicSelectedStyle(mosaicIndex) {
      store.commit('setMosaicLayouts', mosaicIndex.name);
    },

    onSelectedFile({ filename, thumbnail }) {
      const link = [];
      link['icon'] = filename;
      link['iconPreview'] = thumbnail;
      let thumbLargeImage = thumbnail;

      let image = thumbnail.substr(thumbnail.indexOf('data/'),thumbnail.lastIndexOf("/") - (thumbnail.indexOf('data/')));
      image = image +'/'+filename;

      store.state.imageThumb[this.mosaicIndexTrumb].thumb = '../image/'+image;
      store.state.imageThumb[this.mosaicIndexTrumb].image = image;

    },
    onSelectedIcon(icon) {
      const link = [];
      link['icon'] = icon;
      link['iconPreview'] = icon;
    },
    validaImagem(index){
      if(typeof store.state.imageThumb[index] !== 'undefined'){
        return store.state.imageThumb[index].thumb;
      }else{
        store.state.imageThumb[index] = {
          banner_image_description: {
            1:{title: 'Novo banner'}
          },
          image: 'data/preview-product.png',
          link:  '',
          thumb: '../image/data/preview-product.png'
        };
        return '../image/data/preview-product.png';
      }
    },
  },
  watch:{
    imageThumb(images){
      store.state.imageThumb = images;
    }
  },
  computed: {
    imageThumbGrid(){
       let thumbImage = [];
       let maxBanners = 0;
      store.state.imageThumb.map((img,key) => {
        if(['1','2'].indexOf(this.mosaicSelectedIndexName) !== -1 && key <= 3){
          thumbImage.push(img);
          maxBanners = 4;
        }
        if(this.mosaicSelectedIndexName === '3' && key <= 4){
          thumbImage.push(img);
          maxBanners = 5;
        }
        if(this.mosaicSelectedIndexName === '4' && key <= 5){
          thumbImage.push(img);
          maxBanners = 6;
        }
      })

       for(let imgCount = store.state.imageThumb.length; imgCount < maxBanners; imgCount ++){
         thumbImage.push({
           banner_image_description: {
             1:{title: 'Novo banner'}
           },
           image: 'data/preview-product.png',
           link:  '',
           thumb: '../image/data/preview-product.png'
         });
       }


      return thumbImage;
    },
    dragOptions() {
      return {
        animation: 200,
        group: "description",
        disabled: false,
        ghostClass: "ghost"
      };
    },

    mosaicSelectedIndex() {
      return store.state.mosaicSelectedIndex;
    },
  },

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

  updated() {
    this.mosaicSelectedIndexName = store.state.bannersData.mosaic_style;
  }
};
