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 SettingsBannerHomePage from './index.vue';
import MosaicStyles from './index.vue';
import { ValidationObserver, ValidationProvider } from 'vee-validate';

export default {
  name: 'SettingsBannerHomePage',
  model: {
    prop: 'value',
    event: 'click',
  },
  components: {
    BaseButton,
    BaseCard,
    BaseSelect,
    BaseInput: () => import(/* webpackChunkName: "BaseInput" */ '@elements/BaseInput/index.vue'),
    MosaicStyles,
    SettingsBannerHomePage,
    ValidationObserver,
    ValidationProvider,
  },
  data() {
    return {
      situation: DATA.banner_extensions.banner_homepage.habilita_banner,
      settingsType: DATA.banner_extensions.banner_homepage.tipo_configuracao,
      positioningType:  DATA.banner_extensions.banner_homepage.tipo_posicionamento,
      bannerType: DATA.banner_extensions.banner_homepage.tipo_banner,
      displayTime: DATA.banner_extensions.banner_homepage.banner_time,
      hiddenResponsive: DATA.banner_extensions.banner_homepage.hide_responsive,
      smallerWidth: DATA.banner_extensions.banner_homepage.banner_responsive_largura,
      smallerHeight: DATA.banner_extensions.banner_homepage.banner_responsive_altura,
      largerWidth: DATA.banner_extensions.banner_homepage.banner_largura,
      largerHeight: DATA.banner_extensions.banner_homepage.banner_altura,
      banner_rotativo: DATA.banner_extensions.banner_homepage.banner_rotativo,
      Type_AdvancedOrSimple: [],
      Type_ScreenPosition: [],
      Type_ScreenTime: [],
      Type_DsimDnao: [],
      Type_Status: [],
      Type_Screen: [],
    };
  },

  methods: {
    onClickBackToHomePage(screenName) {
      store.commit('setScreenName', screenName);
    },

    setTypeStatus() {
      DATA.Type_Status.map(itemOfStatus => {
        this.Type_Status.push(itemOfStatus);
      });
    },

    setTypeAdvancedOrSimple() {
      DATA.Type_AdvancedOrSimple.map(settingsType => {
        this.Type_AdvancedOrSimple.push(settingsType);
      });
    },

    setTypeScreenPosition() {
      DATA.Type_ScreenPosition.map(screenPosition => {
        this.Type_ScreenPosition.push(screenPosition);
      });
    },

    setTypeScreen() {
      DATA.Type_Screen.map(screenType => {
        this.Type_Screen.push(screenType);
      });
    },

    setTypeScreenTime() {
      Object.values(DATA.Type_ScreenTime).map((Type_ScreenTime) => {
        this.Type_ScreenTime.push(Type_ScreenTime);
      })
    },

    setTypeDsimDnao() {
      Object.values(DATA.Type_DsimDnao).map((Type_DsimDnao) => {
        this.Type_DsimDnao.push(Type_DsimDnao);
      });
    },

    loadAllSettingsBanners() {
      store.dispatch('saveSettingsInBannerHomePage');
    },

    setTypeUseWithFlagDetails(){
      store.state.jsonBannersMounted.habilita_banner           = this.situation;
      store.state.jsonBannersMounted.tipo_banner               = this.bannerType;
      store.state.jsonBannersMounted.banner_rotativo           = this.banner_rotativo;
      store.state.jsonBannersMounted.banner_time               = this.displayTime;
      store.state.jsonBannersMounted.banner_largura            = this.largerWidth;
      store.state.jsonBannersMounted.banner_altura             = this.largerHeight;
      store.state.jsonBannersMounted.banner_responsive_largura = this.smallerWidth;
      store.state.jsonBannersMounted.banner_responsive_altura  = this.smallerHeight;
      store.state.jsonBannersMounted.tipo_configuracao         = this.settingsType;
      store.state.jsonBannersMounted.tipo_posicionamento       = this.positioningType;
      store.state.jsonBannersMounted.hide_responsive           = this.hiddenResponsive;

      DATA.banner_extensions.banner_homepage.habilita_banner = this.situation;
      DATA.banner_extensions.banner_homepage.tipo_configuracao = this.settingsType;
      DATA.banner_extensions.banner_homepage.tipo_posicionamento = this.positioningType;
      DATA.banner_extensions.banner_homepage.tipo_banner = this.bannerType;
      DATA.banner_extensions.banner_homepage.banner_time  = this.displayTime;
      DATA.banner_extensions.banner_homepage.hide_responsive  = this.hiddenResponsive;
      DATA.banner_extensions.banner_homepage.banner_responsive_largura = this.smallerWidth;
      DATA.banner_extensions.banner_homepage.banner_responsive_altura  = this.smallerHeight;
      DATA.banner_extensions.banner_homepage.banner_largura = this.largerWidth;
      DATA.banner_extensions.banner_homepage.banner_altura = this.largerHeight;
      DATA.banner_extensions.banner_homepage.banner_rotativo = this.banner_rotativo;
      
      store.commit('setScreenName', 'HomePage');
    },
    getLanguage(label){
      return store.state.language[label];
    },
    getBanners(){
      let jsonBannersLayout = [];

      store.state.banners.forEach( banners => {
        jsonBannersLayout.push({
          "key": banners.banner_id,
          "value": banners.name,
        });
      });

      return jsonBannersLayout;
    }
  },

  computed: {}  ,

  mounted() {
    this.setTypeStatus();
    this.setTypeAdvancedOrSimple();
    this.setTypeScreenPosition();
    this.setTypeScreen();
    this.setTypeScreenTime();
    this.setTypeDsimDnao();

    this.loadAllSettingsBanners();
  },
};
