<template>
  <div class="hot-search-widget" :class="sizeClass" @click="openDialog = true">
    <div class="tabs">
      <span
        v-for="tab in data.tabs"
        :key="tab"
        class="tab"
        :class="{ active: tab === activeTab }"
      >
        {{ tab }}
      </span>
    </div>
    <ul class="list">
      <li v-for="(item, index) in data.items" :key="index">
        <span class="rank">{{ index + 1 }}</span>
        <span class="title">{{ item.title }}</span>
      </li>
    </ul>
  </div>
  <HotSearchDialog v-model:open="openDialog" />
</template>

<script setup lang="ts">
import { computed, ref } from 'vue';
import HotSearchDialog from './dialog.vue';

type WidgetSize = '1x1' | '1x2' | '2x1' | '2x2' | '2x4';

const props = defineProps<{
  size: WidgetSize;
  data?: {
    tabs: string[];
    items: { title: string; value: string }[];
  };
}>();

const openDialog = ref(false);
const sizeClass = computed(() => `size-${props.size}`);

const defaultData = {
  tabs: ['Trending'],
  items: [
    { title: 'Item A', value: '0' },
    { title: 'Item B', value: '0' },
    { title: 'Item C', value: '0' },
    { title: 'Item D', value: '0' },
    { title: 'Item E', value: '0' }
  ]
};

const data = computed(() => props.data ?? defaultData);
const activeTab = computed(() => data.value.tabs[0] ?? 'Trending');
</script>

<style lang="scss" scoped>
@import '@/styles/tokens.scss';

.hot-search-widget {
  height: 100%;
  display: flex;
  flex-direction: column;

  .tabs {
    display: flex;
    gap: 12px;
    margin-bottom: 8px;

    .tab {
      font-size: 13px;
      color: $color-text-secondary;

      &.active {
        color: $color-text-primary;
        font-weight: 600;
      }
    }
  }

  .list {
    list-style: none;
    font-size: 13px;
    display: flex;
    flex-direction: column;
    gap: 6px;

    li {
      display: flex;
      align-items: center;
      gap: 8px;

      .rank {
        width: 18px;
        text-align: center;
        color: $color-text-secondary;
      }

      .title {
        flex: 1 1 auto;
        min-width: 0;
      }
    }
  }

  &.size-1x1 {
    .tabs {
      display: none;
    }

    .list {
      font-size: 12px;

      li:nth-child(n + 3) {
        display: none;
      }
    }
  }

  &.size-1x2,
  &.size-2x1 {
    .list {
      li:nth-child(n + 4) {
        display: none;
      }
    }
  }

  &.size-2x2,
  &.size-2x4 {
    .list {
      gap: 8px;
    }
  }
}
</style>
