<template>
  <div v-if="countShop">
    <h2 class="mb-5">
      # {{ headerText }}
    </h2>
    <div class="shop-list">
      <Row :gutter="5">
        <Col
          v-for="shop in listShopMall"
          :key="shop.shopid"
          :span="4"
        >
          <Card
            style="height: 250px"
            dis-hover
            class="shop-card"
          >
            <router-link
              :to="shop.spyUrl"
              target="_blank"
            >
              <img
                :src="shop.image"
                alt="Logo"
                class="shop-logo"
              >
              <h3 class="shop-name">
                {{ shop.shop_name }}
              </h3>
              <p class="brand-name">
                {{ shop.brand_name }}
              </p>
            </router-link>
          </Card>
        </Col>
      </Row>
    </div>
  </div>
</template>

<script>
import PromiseMap from 'p-map';
import { getShopMallCategoryId } from '@/api/shopee/client/market';
import { getShopeeShopId as getShopId } from '@/api/shopee/client/shop';
import { imageUrl } from '@/adapter/shopee/render/utils';
import arrayDedupe from 'array-dedupe';
import { loggerShopee } from '@/plugins/logger';

export default {
  name: 'ShopeeCategoryShopMall',
  props: {
    categoryId: String,
  },
  data() {
    return {
      listShopMall: [],
    };
  },
  methods: {
    async fetchListShopMall() {
      let listShopMall = [];
      for (let page = 0; page < 50; page++) {
        const { listShop } = await getShopMallCategoryId(this.categoryId, page);

        if (!listShop.length) {
          break;
        }

        listShopMall.push(
          ...listShop.map((shop) => {
            return {
              ...shop,
              image: imageUrl(shop.logo_pc),
              spyUrl: `/shopee/spy/shop/${shop.shopid}`,
            };
          }),
        );
      }

      listShopMall = arrayDedupe(listShopMall, ['shopid']);

      this.listShopMall = listShopMall;

      if (false) {
        await PromiseMap(
          listShopMall,
          async (shop) => {
            const shopId = shop.shopid;

            const shopInfo = await getShopId(shopId);

            loggerShopee.error({
              msg: 'SHOP_MALL_FETCH_ERROR',
              shopInfo,
            });
          },
          {
            concurrency: 1,
          },
        );
      }
    },
  },
  created() {
    this.fetchListShopMall();
  },
  computed: {
    countShop() {
      return this.listShopMall.length;
    },
    headerText() {
      return this.$t('SHOP_MALL_HEADER_COUNT', {
        count: this.countShop,
      });
    },
  },
};
</script>

<style scoped>
  .shop-list {
    padding: 10px;
    height: 700px;
    overflow-y: auto;
  }
  .shop-card {
    margin-bottom: 20px;
    text-align: center;
  }
  .shop-logo {
    width: 100%;
    height: 120px;
    object-fit: contain;
    margin-bottom: 10px;
  }
  .shop-name {
    font-size: 16px;
    font-weight: bold;
  }
  .brand-name {
    color: #888;
  }
</style>
