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 draggable from 'vuedraggable';
import { IMaskDirective } from 'vue-imask';
import Banner from './index.vue';

export default {
  name: 'BannerStylesSecundaryLayout',
  directives: {
    imask: IMaskDirective,
  },
  components: {
    BaseModal: () => import(/* webpackChunkName: "BaseModal" */ '@components/BaseModal/index.vue'),
    BaseButton,
    BaseSelect,
    BaseInput: () => import(/* webpackChunkName: "BaseInput" */ '@elements/BaseInput/index.vue'),
    BaseCard,
    Banner,
    draggable,
    FileManager
  },
  props: {
    width: {
      type: String,
      default: '200'
    },
    height: {
      type: String,
      default: '200'
    },
    tamanho:{
      type: Number,
      default: 1,
    }
  },
  data() {
    return {
      imageSelected: [],
      isEdit: -1,
      mosaicIndexTrumb: 0,
      open: false,
      Type_Tamanho: ['margin-x-small', 'margin-small', 'margin-medium','margin-large','margin-x-large','no-padding'],
      img: store.state.imageThumbAccess,
      galleryImages: 'galleryImage',
      imageThumb: store.state.imageThumb,
    };
  },
  methods: {
    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;

      if(this.mosaicIndexTrumb === -1){
        store.state.imageThumb.push({
          banner_image_description: {
            1:{title: 'Novo banner'}
          },
          image: 'data/preview-product.png',
          link:  '',
          thumb: '../image/data/preview-product.png'
        })
        this.mosaicIndexTrumb = store.state.imageThumb.length - 1;

      }

      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;
    },
    removeImgBanner(index){
      store.state.imageThumb.splice(index,1);
    },
    editImgBanner(index){

    }
  },
  watch:{
    imageThumb(images){
      store.state.imageThumb = images;
    }
  },
  mounted() {
  },

  computed: {
    dragOptions() {
      return {
        animation: 200,
        group: "description",
        disabled: false,
        ghostClass: "ghost"
      };
    },
    imageThumbAccess() {
      return store.state.imageThumbAccess;
    },

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

    bannerStyle() {
      return store.state.styleOfBanner;
    },
  },
};
