// 用户端语义图标映射，统一以 Element Plus 图标库提供现有界面所需图标。
import { defineComponent, h, type Component, type PropType } from "vue";
import {
  Aim,
  ArrowDown,
  Back,
  Camera as ElementCamera,
  CircleClose,
  Close,
  CollectionTag,
  CopyDocument,
  Delete,
  Document,
  DocumentAdd,
  DocumentChecked,
  Download as ElementDownload,
  EditPen,
  Film as ElementFilm,
  Finished,
  FolderAdd,
  Headset,
  Key as ElementKey,
  Lightning,
  Loading,
  Lock as ElementLock,
  MagicStick,
  Menu as ElementMenu,
  MoreFilled,
  Mute,
  Picture,
  Plus as ElementPlus,
  QuestionFilled,
  Reading,
  Search as ElementSearch,
  SwitchButton,
  Unlock as ElementUnlock,
  Upload as ElementUpload,
  UploadFilled,
  User,
  UserFilled,
  VideoCamera,
  VideoPlay,
  Wallet as ElementWallet,
  WarnTriangleFilled,
  Warning,
} from "@element-plus/icons-vue";

// createSemanticIcon 保留原组件的尺寸参数约定，并把其他样式和事件透传给图标组件。
function createSemanticIcon(name: string, icon: Component) {
  return defineComponent({
    name,
    inheritAttrs: false,
    props: {
      size: { type: [Number, String] as PropType<number | string>, default: undefined },
      strokeWidth: { type: [Number, String] as PropType<number | string>, default: undefined },
    },
    setup(props, { attrs }) {
      return () => {
        const dimension =
          props.size === undefined ? undefined : typeof props.size === "number" ? `${props.size}px` : props.size;
        return h(icon, {
          ...attrs,
          style: [attrs.style, dimension ? { width: dimension, height: dimension } : undefined],
        });
      };
    },
  });
}

export const ArrowLeft = createSemanticIcon("ArrowLeft", Back);
export const BookOpen = createSemanticIcon("BookOpen", Reading);
export const BookOpenText = createSemanticIcon("BookOpenText", Reading);
export const Camera = createSemanticIcon("Camera", ElementCamera);
export const ChevronDown = createSemanticIcon("ChevronDown", ArrowDown);
export const CircleAlert = createSemanticIcon("CircleAlert", Warning);
export const CircleHelp = createSemanticIcon("CircleHelp", QuestionFilled);
export const CircleX = createSemanticIcon("CircleX", CircleClose);
export const Clapperboard = createSemanticIcon("Clapperboard", VideoCamera);
export const Copy = createSemanticIcon("Copy", CopyDocument);
export const Download = createSemanticIcon("Download", ElementDownload);
export const FileInput = createSemanticIcon("FileInput", DocumentAdd);
export const FilePlus2 = createSemanticIcon("FilePlus2", DocumentAdd);
export const FileSearch = createSemanticIcon("FileSearch", Document);
export const FileText = createSemanticIcon("FileText", Document);
export const FileUp = createSemanticIcon("FileUp", UploadFilled);
export const Film = createSemanticIcon("Film", ElementFilm);
export const FolderInput = createSemanticIcon("FolderInput", FolderAdd);
export const Image = createSemanticIcon("Image", Picture);
export const Key = createSemanticIcon("Key", ElementKey);
export const ListChecks = createSemanticIcon("ListChecks", Finished);
export const LoaderCircle = createSemanticIcon("LoaderCircle", Loading);
export const Lock = createSemanticIcon("Lock", ElementLock);
export const LogOut = createSemanticIcon("LogOut", SwitchButton);
export const Menu = createSemanticIcon("Menu", ElementMenu);
export const MoreHorizontal = createSemanticIcon("MoreHorizontal", MoreFilled);
export const Pencil = createSemanticIcon("Pencil", EditPen);
export const Play = createSemanticIcon("Play", VideoPlay);
export const Plus = createSemanticIcon("Plus", ElementPlus);
export const Save = createSemanticIcon("Save", DocumentChecked);
export const Search = createSemanticIcon("Search", ElementSearch);
export const Sparkles = createSemanticIcon("Sparkles", MagicStick);
export const Tags = createSemanticIcon("Tags", CollectionTag);
export const Target = createSemanticIcon("Target", Aim);
export const Trash2 = createSemanticIcon("Trash2", Delete);
export const TriangleAlert = createSemanticIcon("TriangleAlert", WarnTriangleFilled);
export const Unlock = createSemanticIcon("Unlock", ElementUnlock);
export const Upload = createSemanticIcon("Upload", ElementUpload);
export const UserRound = createSemanticIcon("UserRound", User);
export const Users = createSemanticIcon("Users", UserFilled);
export const Volume2 = createSemanticIcon("Volume2", Headset);
export const VolumeX = createSemanticIcon("VolumeX", Mute);
export const Wallet = createSemanticIcon("Wallet", ElementWallet);
const SpeakerGlyph = defineComponent({
  name: "SpeakerGlyph",
  setup: () => () =>
    h(
      "svg",
      {
        viewBox: "0 0 24 24",
        fill: "none",
        stroke: "currentColor",
        "stroke-width": "1.8",
        "stroke-linecap": "round",
        "stroke-linejoin": "round",
      },
      [
        h("path", { d: "M4 9v6h4l5 4V5L8 9H4" }),
        h("path", { d: "M16 9.5a4 4 0 0 1 0 5" }),
        h("path", { d: "M18.5 7a7.5 7.5 0 0 1 0 10" }),
      ],
    ),
});
const SpeakerOffGlyph = defineComponent({
  name: "SpeakerOffGlyph",
  setup: () => () =>
    h(
      "svg",
      {
        viewBox: "0 0 24 24",
        fill: "none",
        stroke: "currentColor",
        "stroke-width": "1.8",
        "stroke-linecap": "round",
        "stroke-linejoin": "round",
      },
      [h("path", { d: "M4 9v6h4l5 4V5L8 9H4" }), h("path", { d: "m17 9 4 4" }), h("path", { d: "m21 9-4 4" })],
    ),
});
export const Speaker = createSemanticIcon("Speaker", SpeakerGlyph);
export const SpeakerOff = createSemanticIcon("SpeakerOff", SpeakerOffGlyph);
export const X = createSemanticIcon("X", Close);
export const Zap = createSemanticIcon("Zap", Lightning);
