import { NFlex, selectProps, type SelectRenderLabel } from "naive-ui";
import type { PropType } from "vue";
import { Icon } from "..";
import type { SelectBaseOption } from "naive-ui/es/select/src/interface";
import { iconMap } from "./icon";

export const selectIconProps = {
  ...selectProps,
  clearable: {
    type: Boolean,
    default: true,
  },
  renderLabel: {
    type: Function as PropType<SelectRenderLabel>,
    default: (option: SelectBaseOption) => {
      return (
        <NFlex class={"margin-xs"}>
          <Icon name={option.value as string} />
          --<label>{option.label}</label>
        </NFlex>
      );
    },
  },
  options: {
    type: Array as PropType<SelectBaseOption[]>,
    default: () =>
      Array.from(iconMap.entries()).map(([k, v]) => ({
        label: v.title || k,
        value: k,
      })),
  },
};
