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

import { IconPicker } from '@vben/common-ui';
import { listIcons } from '@vben/icons';

import { useVModel } from '@vueuse/core';
import { Input } from 'ant-design-vue';

import iconData from '#/components/icon/icon.data';

export interface Props {
  allowClear?: boolean;
  pageSize?: number;
  /**
   * 可以通过prefix获取系统中使用的图标集
   */
  prefix?: string;
  readonly?: boolean;
  value?: string;
  width?: string;
}

// Don't inherit FormItem disabled、placeholder...
defineOptions({
  inheritAttrs: false,
});

const props = withDefaults(defineProps<Props>(), {
  allowClear: true,
  pageSize: 36,
  prefix: '',
  readonly: false,
  value: '',
  width: '100%',
});

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

const modelValue = useVModel(props, 'value', emit, {
  defaultValue: props.value,
  passive: true,
});

const refIconPicker = ref();

const currentList = computed(() => {
  try {
    if (props.prefix) {
      const icons = listIcons('', props.prefix);
      if (icons.length === 0) {
        console.warn(`No icons found for prefix: ${props.prefix}`);
      }
      return icons;
    } else {
      const prefix = iconData.prefix;
      return iconData.icons.map((icon: any) => `${prefix}:${icon}`);
    }
  } catch (error) {
    console.error('Failed to load icons:', error);
    return [];
  }
});

const triggerPopover = () => {
  refIconPicker.value?.changeOpenState?.();
};

const handleChange = (icon: string) => {
  emit('update:value', icon);
};
</script>

<template>
  <Input
    v-model:value="modelValue"
    :allow-clear="props.allowClear"
    :readonly="props.readonly"
    :style="{ width }"
    class="cursor-pointer"
    placeholder="点击选中图标"
    @click="triggerPopover"
  >
    <template #addonAfter>
      <IconPicker
        ref="refIconPicker"
        :icons="currentList"
        :page-size="pageSize"
        :value="modelValue"
        @change="handleChange"
      />
    </template>
  </Input>
</template>
