<template>
  <div>
    <Input
      v-model="searchText"
      :placeholder="$t('SEARCH_CATEOGRY_NAME')"
      clearable
      style="margin-bottom: 16px"
      @on-change="onSearch"
    />
    <Tree
      :data="displayedTreeData"
      :show-checkbox="false"
      :highlight-current="false"
      :render="renderContent"
      :default-expand-all="true"
      :checked-keys.sync="checkedKeys"
    />
  </div>
</template>

<script>
import slugify from 'slugify';
import { getShopeeCategoryTreeHome } from '@/api/shopee/client/category';
import { imageUrl } from '@/adapter/shopee/render/utils';

export default {
  name: 'ShopeeCategoryTree',
  data() {
    return {
      fullTreeData: [],
      displayedTreeData: [],
      searchText: '',
      checkedKeys: [],
      matchedKeys: [],
    };
  },
  methods: {
    buildTree(data, is_root) {
      return data.map((node) => ({
        title: node.display_name,
        slug: slugify(node.display_name, {
          lower: true,
          trim: true,
          locale: 'vi',
        }),
        category_id: node.catid,
        key: node.catid,
        image: imageUrl(node.image),
        is_root,
        children: node.children ? this.buildTree(node.children, false) : [],
      }));
    },
    searchTreeForHighlight(nodes, keyword, matches = []) {
      nodes.forEach((node) => {
        if (node.title.toLowerCase().includes(keyword.toLowerCase())) {
          matches.push(node.category_id);
        }
        if (node.children && node.children.length) {
          this.searchTreeForHighlight(node.children, keyword, matches);
        }
      });
      return matches;
    },
    filterTree(nodes, keyword) {
      const filtered = [];
      nodes.forEach((node) => {
        const titleMatch = node.title.toLowerCase().includes(keyword.toLowerCase());
        let childrenFiltered = [];
        if (node.children && node.children.length) {
          childrenFiltered = this.filterTree(node.children, keyword);
        }
        if (titleMatch) {
          filtered.push({ ...node, children: node.children });
        } else if (childrenFiltered.length) {
          filtered.push({ ...node, children: childrenFiltered });
        }
      });
      return filtered;
    },
    onSearch() {
      const keyword = this.searchText.trim();
      if (!keyword) {
        this.matchedKeys = [];
        this.displayedTreeData = this.fullTreeData;
      } else {
        const matches = this.searchTreeForHighlight(this.fullTreeData, keyword, []);
        this.matchedKeys = matches;
        this.displayedTreeData = this.filterTree(this.fullTreeData, keyword);
      }
    },
    renderContent(h, { data }) {
      const { category_id: categoryId, slug } = data;

      const isMatched = this.matchedKeys.includes(categoryId);
      const thumbnail = data.image;

      const spyUrl = this.getRouterUrl(`/shopee/spy/category/${categoryId}`);
      const categoryUrl = `https://shopee.vn/${slug}-cat.${categoryId}`;

      const attrMatch = isMatched ? { color: '#f90', fontWeight: 'bold' } : {};
      return h(
        'div',
        { style: { display: 'flex', alignItems: 'center' } },
        [
          thumbnail
            && h('img', {
              attrs: { src: thumbnail },
              style: {
                width: '24px',
                height: '24px',
                marginRight: '8px',
                borderRadius: '4px',
                objectFit: 'cover',
              },
            }),
          h(
            'a',
            {
              attrs: { href: categoryUrl, target: '_blank' },
              style: { textDecoration: 'none', color: '#515a6e', ...attrMatch },
            },
            data.title,
          ),
          h(
            'a',
            {
              attrs: { href: spyUrl, target: '_blank' },
              style: { marginLeft: '5px' },
            },
            this.$t('SPY_BTN'),
          ),
        ],
      );
    },
  },
  created() {
    const raw = getShopeeCategoryTreeHome();
    this.fullTreeData = this.buildTree(raw, true);
    this.displayedTreeData = this.fullTreeData;
  },
};
</script>

<style scoped>
</style>
