<template>
  <div>
    <div v-if="isConnected">
      <div class="text-right mb-10">
        <Button
          type="error"
          :loading="loading"
          size="small"
          @click="disconnectShop"
        >
          {{ $t('SHOP_DISCONNECT_BTN') }}
        </Button>
      </div>
      <Alert
        show-icon
        type="success"
      >
        <div>
          {{ $t('SHOP_WAS_CONNECTED', { shop: shopName }) }}
        </div>
        <div v-if="false">
          {{ $t('SHOP_ID_CONNECTED', { id: getShopeeShopRef }) }}
        </div>
      </Alert>
    </div>
    <div v-else>
      <div class="text-right mb-10">
        <Button
          type="success"
          :loading="loading"
          size="small"
          @click="connectShop"
        >
          {{ $t('SHOP_CONNECT_BTN') }}
        </Button>
      </div>
      <Alert
        show-icon
        type="warning"
      >
        <span>{{ $t('SHOP_NOT_CONNECTED', { shop: shopName }) }}</span>
      </Alert>
    </div>
  </div>
</template>

<script>
import { mapActions } from 'vuex';
import { getShopeeProfileClient } from '@/api/shopee/client/shop/index';
import { getShopeeSellerFallbackInfo } from '@/api/shopee/seller';
import { loggerShopee } from '@/plugins/logger';

export default {
  data() {
    return {
      shopName: '',
      shopId: '',
      loading: false,
      username: '',
      phone: '',
      email: '',
    };
  },
  methods: {
    ...mapActions(['ShopeeSellerUnSync', 'ShopeeSellerConnect']),
    async disconnectShop() {
      this.loading = true;
      await this.ShopeeSellerUnSync();
      this.loading = false;
    },
    async connectShop() {
      this.loading = true;

      try {
        const data = await this.ShopeeSellerConnect();

        if (data.success) {
          this.$Message.success(data.msg);
        } else {
          this.$Message.error(data.msg);
        }
      } catch (error) {
        this.$Message.error(this.$t('SHOP_CONNECT_ERROR'));
        loggerShopee.error({
          msg: 'ERROR_CONNECT_SHOP',
          error,
        });
      }

      this.loading = false;
    },
    async init() {
      const clientProfile = await getShopeeProfileClient();

      if (clientProfile) {
        this.shopName = clientProfile.username;
        this.shopId = clientProfile.shopid || clientProfile.shop_id;
        this.username = clientProfile.username;
        this.phone = clientProfile.phone;
        this.email = clientProfile.email;
        return true;
      }

      const sellerFallback = await getShopeeSellerFallbackInfo();

      if (sellerFallback) {
        this.shopName = sellerFallback.shopName;
        this.shopId = sellerFallback.shopId;
        this.username = sellerFallback.username;
        return true;
      }

      return false;
    },
  },
  created() {
    this.shopName = this.getShopeeShopName;
    this.username = this.getShopeeShopName;
    this.shopId = this.getShopeeShopId;
    this.ShopeeSellerInit();
    this.init();
  },
  computed: {
    isConnected() {
      return !!this.getShopeeShopRef;
    },
  },
};
</script>
