import AdmVue from '@assets/js/adm-vue';
import modelPrice from '../../../model/marketplace/marketplace/marketplacePrice.js';

const vm = new AdmVue({
  components: {
    BaseCard: () => import(/* webpackChunkName: "BaseCard" */ '@elements/BaseCard/index.vue'),
    BaseInputFile: () => import(/* webpackChunkName: "BaseInputFile" */ '@elements/BaseInputFile/index.vue'),
    BaseCheckbox: () => import(/* webpackChunkName: "BaseInputFile" */ '@elements/BaseCheckbox/index.vue'),
    BaseTabs: () => import(/* webpackChunkName: "BaseTabs" */ '@components/BaseTabs/index.vue'),
    AsideContent: () => import(/* webpackChunkName: "AsideContent" */ '@components/AsideContent/index.vue'),
    BaseTextarea: () => import(/* webpackChunkName: "BaseTextarea" */ '@elements/BaseTextarea/index.vue'),
    GroupInput: () => import(/* webpackChunkName: "BaseTabs" */ '@components/GroupInput/index.vue'),
    MarketPrice: () => import(/* webpackChunkName: "MarketPrice" */ '@components/MarketPrice/index.vue'),
    BaseModal: () => import(/* webpackChunkName: "BaseModal" */ '@components/BaseModal/index.vue'),
  },
  data() {
    return {
      configurations: {
        shopee_status: false,
        shopee_email: '',
        shopee_password: '',
        shopee_initial_description: '',
        shopee_final_description: '',
        shopee_environment: '',
      },
      disableForm: false,
      loadingBtn: false,
      loadingBtnStatus: false,
      loadingBtnAuth: false,
      marketPriceObject: {},
      mktPrice: [],
      mktPriceDelete: [],
      textUrlCallCopy: '',
      textUrlNotyCopy: '',
    };
  },
  created() {},
  beforeMount() {
    this.marketPriceObject = JSON.parse(this.marketprice);

    if (this.marketPriceObject.mktpriceadjustments.length) {
      this.marketPriceObject.mktpriceadjustments = this.marketPriceObject.mktpriceadjustments;
    }

    this.tabs = this.shopeeSettingsTabs;
  },
  mounted() {},
  watch: {},
  computed: {
    sendData() {
      const mktPriceAdjustments = this.mktPrice.map(item => {
        item.marketplace_price_adjustments = item.marketplace_price_adjustments.filter(value => value != null);
        item = modelPrice.format(item);
        return item;
      });
      return {
        ...this.configurations,
        mktpriceadjustments: { data: mktPriceAdjustments, delete: this.mktPriceDelete },
      };
    },
  },
  methods: {
    setErrors(errors) {
      this.$refs.validationObserver.setErrors(errors);
    },
    formError(data, validationObserver) {
      validationObserver = validationObserver || this.$refs.validationObserver;

      const { errors } = data;
      validationObserver.setErrors(errors);
      if (errors.warning) {
        this.alert = {
          type: 'warning',
          message: errors.warning,
        };
      }
    },
    formSuccess({ mktpriceadjustments }) {
      const marketPriceObject = this.cloneObject(this.marketPriceObject);
      marketPriceObject.mktpriceadjustments = mktpriceadjustments;
      this.marketPriceObject = marketPriceObject;
    },
    clickTab(tab, value) {
      this[tab] = value;
    },
    parseBoolean(value) {
      return Boolean(Number(value));
    },
    validateAuth: async function() {
      try {
        this.loadingBtnAuth = true;

        const { data } = await this.axiosApi({
          url: this.url.authApi,
          method: 'GET',
        });

        const { error, success } = data;

        if (success) {
          this.alert = {
            type: 'success',
            message: success,
          };
        } else {
          this.alert = {
            type: 'error',
            message: error,
          };
        }
      } catch (e) {
        console.log(e);
      } finally {
        this.configurations = { ...this.configurations };
        this.loadingBtnAuth = false;
      }
    },
  },
});

AdmVue.init(vm);
