import type { ComponentType, ReactNode, SVGProps } from "react";
import {
  CalendarIcon as MuCalendarIcon,
  CheckIcon as MuCheckIcon,
  ChevronIcon as MuChevronIcon,
  ClockIcon as MuClockIcon,
  CloseIcon as MuCloseIcon,
  DocumentIcon as MuDocumentIcon,
  DuplicateIcon as MuDuplicateIcon,
  PenIcon as MuPenIcon,
  PlusIcon as MuPlusIcon,
  SearchIcon as MuSearchIcon,
  ShareIcon as MuShareIcon,
  TagIcon as MuTagIcon,
  TrashIcon as MuTrashIcon,
  type IconProps,
} from "@unlocalhosted/metalui/icons";

export {
  LinkIcon,
  MoreIcon,
  MorphIcon,
  NoteIcon,
  PinIcon,
  SyncedIcon,
  ImageIcon,
  UndoIcon,
  SendAwayIcon,
} from "@unlocalhosted/metalui/icons";

/**
 * A MetalUI glyph (monoline + duotone on the 24 grid, with its hover act) behind the app's icon
 * signature: `width`/`height` become its `size`. Inside a MetalUI Button, Menu row or any element with
 * `mu-icon-trigger`, the glyph plays its act from the whole control.
 */
function metal(Glyph: ComponentType<IconProps>, turn?: IconProps["turn"]) {
  return function Icon({ width, height, ...props }: SVGProps<SVGSVGElement>) {
    const { ref, ...rest } = props;
    void ref;
    return <Glyph size={Number(width ?? height ?? 16)} turn={turn} {...(rest as IconProps)} />;
  };
}

export const SearchIcon = metal(MuSearchIcon);
export const PlusIcon = metal(MuPlusIcon);
export const TrashIcon = metal(MuTrashIcon);
export const CheckIcon = metal(MuCheckIcon);
export const XIcon = metal(MuCloseIcon);
export const CopyIcon = metal(MuDuplicateIcon);
export const PencilIcon = metal(MuPenIcon);
export const UploadIcon = metal(MuShareIcon);
export const CalendarIcon = metal(MuCalendarIcon);
export const ClockIcon = metal(MuClockIcon);
export const TagIcon = metal(MuTagIcon);
export const FileIcon = metal(MuDocumentIcon);
/** The set's chevron points down; turned for the other directions. */
export const ChevronDownIcon = metal(MuChevronIcon);
export const ChevronRightIcon = metal(MuChevronIcon, 270);
export const ChevronLeftIcon = metal(MuChevronIcon, 90);

// Glyphs the set doesn't have, drawn in its manner: monoline on the 24 grid at its 1.7 stroke.
function icon(children: ReactNode) {
  return function Icon(props: SVGProps<SVGSVGElement>) {
    return (
      <svg
        viewBox="0 0 24 24"
        width={16}
        height={16}
        fill="none"
        stroke="currentColor"
        strokeWidth={1.7}
        strokeLinecap="round"
        strokeLinejoin="round"
        aria-hidden
        {...props}
      >
        {children}
      </svg>
    );
  };
}

export const RepoIcon = icon(
  <>
    <path d="M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z" />
    <path d="m3.3 7 8.7 5 8.7-5" />
    <path d="M12 22V12" />
  </>,
);
export const CodeIcon = icon(
  <>
    <path d="m16 18 6-6-6-6" />
    <path d="m8 6-6 6 6 6" />
  </>,
);
export const IssueOpenedIcon = icon(
  <>
    <circle cx="12" cy="12" r="9.5" />
    <circle cx="12" cy="12" r="2.5" fill="currentColor" />
  </>,
);
export const IssueClosedIcon = icon(
  <>
    <circle cx="12" cy="12" r="9.5" />
    <path d="m8.5 12 2.5 2.5 4.5-5" />
  </>,
);
export const HistoryIcon = icon(
  <>
    <path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" />
    <path d="M3 3v5h5" />
    <path d="M12 7v5l4 2" />
  </>,
);
export const BranchIcon = icon(
  <>
    <path d="M6 3v12" />
    <circle cx="18" cy="6" r="3" />
    <circle cx="6" cy="18" r="3" />
    <path d="M18 9a9 9 0 0 1-9 9" />
  </>,
);
export const DirIcon = icon(
  <path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z" />,
);
export const SubmoduleIcon = icon(
  <>
    <path d="M2 9V5a2 2 0 0 1 2-2h3.93a2 2 0 0 1 1.66.9l.82 1.2a2 2 0 0 0 1.66.9H20a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H2" />
    <path d="m8 16 3-3-3-3" />
    <path d="M2 16v-1a2 2 0 0 1 2-2h6" />
  </>,
);
export const CommitIcon = icon(
  <>
    <circle cx="12" cy="12" r="3.5" />
    <path d="M3 12h5.5M15.5 12H21" />
  </>,
);
export const BookIcon = icon(
  <>
    <path d="M2 4h6a4 4 0 0 1 4 4v13a3 3 0 0 0-3-3H2z" />
    <path d="M22 4h-6a4 4 0 0 0-4 4v13a3 3 0 0 1 3-3h7z" />
  </>,
);
export const CommentIcon = icon(<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />);
export const LockIcon = icon(
  <>
    <rect width="18" height="11" x="3" y="11" rx="2.5" />
    <path d="M7 11V7a5 5 0 0 1 10 0v4" />
  </>,
);
export const KeyIcon = icon(
  <>
    <path d="M2.586 17.414A2 2 0 0 0 2 18.828V21a1 1 0 0 0 1 1h3a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h1a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h.172a2 2 0 0 0 1.414-.586l.814-.814a6.5 6.5 0 1 0-4-4z" />
    <circle cx="16.5" cy="7.5" r=".75" fill="currentColor" />
  </>,
);
export const ShieldLockIcon = icon(
  <>
    <path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z" />
    <path d="m9 12 2 2 4-4" />
  </>,
);
export const GearIcon = icon(
  <>
    <path d="M20 7h-9M14 17H5" />
    <circle cx="17" cy="17" r="3" />
    <circle cx="7" cy="7" r="3" />
  </>,
);
export const PersonIcon = icon(
  <>
    <circle cx="12" cy="8" r="4.5" />
    <path d="M20 21a8 8 0 0 0-16 0" />
  </>,
);
export const PeopleIcon = icon(
  <>
    <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" />
    <circle cx="9" cy="7" r="4" />
    <path d="M22 21v-2a4 4 0 0 0-3-3.87" />
    <path d="M16 3.13a4 4 0 0 1 0 7.75" />
  </>,
);
export const SignOutIcon = icon(
  <>
    <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" />
    <path d="m16 17 5-5-5-5" />
    <path d="M21 12H9" />
  </>,
);
export const ArrowRightIcon = icon(
  <>
    <path d="M5 12h14" />
    <path d="m12 5 7 7-7 7" />
  </>,
);
export const TerminalIcon = icon(
  <>
    <path d="m4 17 6-6-6-6" />
    <path d="M12 19h8" />
  </>,
);
export const AlertIcon = icon(
  <>
    <path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3" />
    <path d="M12 9v4" />
    <path d="M12 17h.01" />
  </>,
);
export const CompassIcon = icon(
  <>
    <circle cx="12" cy="12" r="9.5" />
    <path d="m16.24 7.76-1.804 5.411a2 2 0 0 1-1.265 1.265L7.76 16.24l1.804-5.411a2 2 0 0 1 1.265-1.265z" />
  </>,
);
export const GlobeIcon = icon(
  <>
    <circle cx="12" cy="12" r="9.5" />
    <path d="M12 2.5a14.5 14.5 0 0 0 0 19 14.5 14.5 0 0 0 0-19" />
    <path d="M2.5 12h19" />
  </>,
);
export const EyeIcon = icon(
  <>
    <path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0" />
    <circle cx="12" cy="12" r="3" />
  </>,
);
export const HomeIcon = icon(
  <>
    <path d="M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
    <path d="M9 21v-7a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v7" />
  </>,
);
export const SparkleIcon = icon(
  <path d="M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z" />,
);
export const ExternalIcon = icon(
  <>
    <path d="M15 3h6v6" />
    <path d="M10 14 21 3" />
    <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" />
  </>,
);
export const SunIcon = icon(
  <>
    <circle cx="12" cy="12" r="4" />
    <path d="M12 2v2M12 20v2m-7.07-2.93 1.41-1.41m11.32-11.32 1.41-1.41M2 12h2m16 0h2M4.93 4.93l1.41 1.41m11.32 11.32 1.41 1.41" />
  </>,
);
export const MoonIcon = icon(<path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z" />);
export const MonitorIcon = icon(
  <>
    <rect width="20" height="14" x="2" y="3" rx="2" />
    <path d="M8 21h8M12 17v4" />
  </>,
);
export const MenuIcon = icon(<path d="M4 6h16M4 12h16M4 18h16" />);
export const ChevronsUpDownIcon = icon(<path d="m7 15 5 5 5-5M7 9l5-5 5 5" />);
export const CommandIcon = icon(<path d="M15 6v12a3 3 0 1 0 3-3H6a3 3 0 1 0 3 3V6a3 3 0 1 0-3 3h12a3 3 0 1 0-3-3" />);
export const ListIcon = icon(<path d="M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01" />);
export const BoardIcon = icon(
  <>
    <rect x="3" y="3" width="18" height="18" rx="2" />
    <path d="M9 3v18M15 3v18" />
  </>,
);
export const SlidersIcon = icon(<path d="M21 4h-7M10 4H3M21 12h-9M8 12H3M21 20h-5M12 20H3M14 2v4M8 10v4M16 18v4" />);