<template>
  <div
    v-if="countShop"
    class="sp-shopmall"
  >
    <h2 class="sp-shopmall__header">
      # {{ headerText }}
    </h2>
    <div class="sp-shopmall__list">
      <Row :gutter="12">
        <Col
          v-for="shop in listShopMall"
          :key="shop.shopid"
          :span="4"
        >
          <Card
            dis-hover
            class="sp-shopmall__card"
          >
            <router-link
              :to="shop.spyUrl"
              target="_blank"
              class="sp-shopmall__link"
            >
              <img
                :src="shop.image"
                alt="Logo"
                class="sp-shopmall__logo"
              >
              <h3 class="sp-shopmall__name">
                {{ shop.shop_name }}
              </h3>
              <p class="sp-shopmall__brand">
                {{ 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 lang="scss" scoped>
@import '@/vue/styles/tokens.scss';

.sp-shopmall {
  &__header {
    margin: 0 0 16px;
    font-size: 20px;
    font-weight: 700;
    color: $c-text-strong;
  }

  &__list {
    @include scrollbar;

    max-height: 700px;
    overflow-y: auto;
    padding: 4px;
  }

  &__card.ivu-card {
    @include card-hover;

    margin-bottom: 16px;
    height: 250px;
    text-align: center;
    background: $c-surface;
    border: 1px solid $c-border;
    border-radius: $radius-card;
    box-shadow: $shadow-card;
    overflow: hidden;

    &:hover {
      border-color: $c-brand-tint;
    }

    .ivu-card-body {
      padding: 14px;
    }
  }

  &__link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-decoration: none;
  }

  &__logo {
    width: 100%;
    height: 120px;
    object-fit: contain;
    border-radius: $radius-item;
    background: $c-surface-soft;
  }

  &__name {
    @include line-clamp(2);

    margin: 0;
    width: 100%;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    color: $c-text-strong;
    transition: color $motion-fast;
  }

  &__brand {
    @include ellipsis;

    margin: 0;
    width: 100%;
    font-size: 12px;
    font-weight: 500;
    color: $c-text-muted;
  }

  &__card.ivu-card:hover &__name {
    color: $c-brand;
  }
}
</style>
