import ListTypeOfCarrosselSecundary from '@components/banners/BannerSecundaries/ListModules/ListTypeOfCarrosselSecundary/index.vue';
import MosaicModuleSecundaryBanner from '@components/banners/BannerSecundaries/ListModules/ListTypeOfMosaicSecundary/index.vue';
import ListTypeOfMosaicSecundary from '@components/banners/BannerSecundaries/ListModules/ListTypeOfMosaicSecundary/index.vue';
import ListTypeOfBannerSecundary from '@components/banners/BannerSecundaries/ListModules/ListTypeOfBannerSecundary/index.vue';
import BannerDynamicConfiguration from '@components/banners/PrimaryBanner/ListDynamic/SettingsDynamicBanner/index.vue';
import SecundaryBannerComponents from '@components/banners/BannerSecundaries/BannersSecundariesModules/index.vue';
import ImagesBannerHomePage from '@components/banners/PrimaryBanner/BannerImage/BannersSettingImages/index.vue';
import BannerUpdateConfiguration from '@components/banners/BannerSecundaries/UpdateBannerSettings/index.vue';
import imagesHomePageConfiguration from '@components/banners/SettingsImageBannerHomePage/index.vue';
import MosaicStyles from '@components/banners/BannerSecundaries/StylesBanners/Mosaic/index.vue';
import ProductsBannerHomePage from '@components/banners/ProductsBannerHomePage/index.vue';
import SettingsBannerHomePage from '@components/banners/SettingsBannerHomePage/index.vue';
import PrimaryBanner from '@components/banners/PrimaryBanner/index.vue';
import SearchProduct from '@components/SearchProduct/index.vue';
import TheHeader from '@components/FileManager/TheHeader.vue';
import FileManager from '@components/FileManager/index.vue';
import BaseFile from '@components/FileManager/BaseFile.vue';
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 VueCarousel from 'vue-carousel';
import VueToggles from 'vue-toggles';
import Vue from 'vue';

Vue.use(VueCarousel);

Vue.component('VueToggles', VueToggles);
Vue.component('ListTypeOfBannerSecundary', ListTypeOfBannerSecundary);

export default {
  name: 'BannerDashboard',
  model: {
    prop: 'store.state.jsonBannersMounted',
    event: 'change',
  },
  props: {
    language: {
      type: Object,
    }
  },
  components: {
    ListTypeOfCarrosselSecundary,
    imagesHomePageConfiguration,
    MosaicModuleSecundaryBanner,
    BannerUpdateConfiguration,
    BannerDynamicConfiguration,
    SecundaryBannerComponents,
    ListTypeOfMosaicSecundary,
    ProductsBannerHomePage,
    SettingsBannerHomePage,
    ImagesBannerHomePage,
    SearchProduct,
    PrimaryBanner,
    MosaicStyles,
    FileManager,
    BaseSelect,
    BaseButton,
    TheHeader,
    BaseCard,
    BaseFile,
  },
  data() {
    return {
      configurations: {
        settingsBannerHomePage: []
      },

      layoutNameCarrousel: [],
      layoutNameBanner: [],
      layoutNameMosaic: [],
      bannersSection: [],
      isActiveButton: false,
      layoutsInformations: [
        {
          layout_id: {
            type: String,
          },
          name: {
            type: String,
          },
        },
      ],
      HomePageBannertabActived: true,
      displaySelected: {
        type: Boolean,
      },
      bannerId: {
        type: String,
      },
      nameOfScreen: {
        type: String,
      },
      banner: {
        type: Array,
      },
      typeStatusBanner: store.state.StatusSecindaryBanner === '1',
    };
  },
  methods: {
    onLoadButton() {
      DATA.banner_extensions.banners_secundaries.map(findBannerSelectedById => {
        if (store.state.bannerId === findBannerSelectedById.banner_id) {
          if (findBannerSelectedById.status === '1') {
            this.typeStatusBanner = true;
            store.commit('setActiveBanner', this.typeStatusBanner);
          } else {
            this.isActiveButton = false;
            store.commit('setActiveBanner', this.typeStatusBanner);
          }
        }
      });
    },

    onclickButtonEnableAndDisable() {
      this.typeStatusBanner = !this.typeStatusBanner;
      let banner = store.state.jsonBannersMounted.banner.filter(value => value.banner_id === store.state.bannerId);
      banner[0].status = this.typeStatusBanner? '1':'0';
      store.commit('setActiveBanner', this.typeStatusBanner);
      let bannerSecundari = [];
      DATA.banner_extensions.banners_secundaries.map(findBannerSelectedById => {
        if (store.state.bannerId === findBannerSelectedById.banner_id) {
          bannerSecundari.push({
            'UUID' :  banner[0].UUID,
            'banner_id':  banner[0].banner_id,
            'name':  banner[0].name,
            'status':  banner[0].status,
            'banners': findBannerSelectedById.banners,
            'carousels': findBannerSelectedById.carousels,
            'mosaics': findBannerSelectedById.mosaics,
          });
        }else{
          bannerSecundari.push(findBannerSelectedById);
        }
      });

      DATA.banner_extensions.banners_secundaries = bannerSecundari;
    },

    setTabNameOnStore(tabName) {
      tabName === 'HomePageBanner' ? (this.HomePageBannertabActived = true) : (this.HomePageBannertabActived = false);
    },

    setBannersList() {
      store.dispatch('setBanners');
    },

    setScreenName(screenName) {
      store.commit('setScreenName', screenName);
    },
    getLanguage(label) {
      return store.state.language[label];
    },
  },

  computed: {
    screenSelected() {
      this.$emit('callbacksubmit', store.state.screenName !== 'HomePage');
      return store.state.screenName;
    },
    storeBannerID(){
      return store.state.bannerId !== 0;
    }
  },

  mounted() {
    this.onLoadButton();
    this.setBannersList();
    this.$emit('change', store.state.jsonBannersMounted);
    store.state.language = this.language;
  },
};
