<script lang="ts" setup>
import type { MenuMixedOption } from 'naive-ui/es/menu/src/interface'

defineOptions({ name: 'IconGroup' })

const props = withDefaults(defineProps<Props>(), {
  options: () => [],
  value: '',
})

const emit = defineEmits(['update:value'])

export interface Props {
  options: MenuMixedOption[]
  value: string
}

function isSelect(item: MenuMixedOption) {
  return item.svgname === props.value
}

function handleClick(item: MenuMixedOption) {
  emit('update:value', item.name)
}

function getSvgName(item: MenuMixedOption) {
  const name = props.value === item.svgname ? `${item.svgname}-select` : item.svgname
  return name as string
}
</script>

<template>
  <n-tooltip v-for="(item, index) in options" :key="index" placement="right" trigger="hover">
    <template #trigger>
      <button
        class="icon-button" :class="{ 'icon-button--selected': isSelect(item) }"
        @click="handleClick(item)"
      >
        <SvgIcon :size="item.svgsize as number" :name="getSvgName(item)" />
      </button>
    </template>
    <span>{{ item.title }}</span>
  </n-tooltip>
</template>

<style scoped>
.icon-button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  height: 50px;
  width: 68px;
  text-align: center;
  box-sizing: border-box;
  vertical-align: middle;
}

.icon-button--selected {
  background-color: #d7e6fe;
}
</style>
