import type { ComponentType, SVGProps } from "react";
import ArrowForward from "@material-symbols/svg-400/rounded/arrow_forward.svg?react";
import CalendarMonth from "@material-symbols/svg-400/rounded/calendar_month.svg?react";
import CalendarMonthFill from "@material-symbols/svg-400/rounded/calendar_month-fill.svg?react";
import Check from "@material-symbols/svg-400/rounded/check.svg?react";
import ChevronLeft from "@material-symbols/svg-400/rounded/chevron_left.svg?react";
import ChevronRight from "@material-symbols/svg-400/rounded/chevron_right.svg?react";
import Close from "@material-symbols/svg-400/rounded/close.svg?react";
import CloudOff from "@material-symbols/svg-400/rounded/cloud_off.svg?react";
import Description from "@material-symbols/svg-400/rounded/description.svg?react";
import Download from "@material-symbols/svg-400/rounded/download.svg?react";
import ErrorIcon from "@material-symbols/svg-400/rounded/error.svg?react";
import EventBusy from "@material-symbols/svg-400/rounded/event_busy.svg?react";
import EventRepeat from "@material-symbols/svg-400/rounded/event_repeat.svg?react";
import FolderOpen from "@material-symbols/svg-400/rounded/folder_open.svg?react";
import FilterList from "@material-symbols/svg-400/rounded/filter_list.svg?react";
import Groups from "@material-symbols/svg-400/rounded/groups.svg?react";
import GroupsFill from "@material-symbols/svg-400/rounded/groups-fill.svg?react";
import Info from "@material-symbols/svg-400/rounded/info.svg?react";
import KeyboardArrowDown from "@material-symbols/svg-400/rounded/keyboard_arrow_down.svg?react";
import LocationOn from "@material-symbols/svg-400/rounded/location_on.svg?react";
import MobileArrowDown from "@material-symbols/svg-400/rounded/mobile_arrow_down.svg?react";
import MoreHoriz from "@material-symbols/svg-400/rounded/more_horiz.svg?react";
import MoreVert from "@material-symbols/svg-400/rounded/more_vert.svg?react";
import OpenInNew from "@material-symbols/svg-400/rounded/open_in_new.svg?react";
import Person from "@material-symbols/svg-400/rounded/person.svg?react";
import Refresh from "@material-symbols/svg-400/rounded/refresh.svg?react";
import Schedule from "@material-symbols/svg-400/rounded/schedule.svg?react";
import Search from "@material-symbols/svg-400/rounded/search.svg?react";
import SearchOff from "@material-symbols/svg-400/rounded/search_off.svg?react";
import UploadFile from "@material-symbols/svg-400/rounded/upload_file.svg?react";

import ContentCopy from "@material-symbols/svg-400/rounded/content_copy.svg?react";
import Difference from "@material-symbols/svg-400/rounded/difference.svg?react";
import Share from "@material-symbols/svg-400/rounded/share.svg?react";
import Visibility from "@material-symbols/svg-400/rounded/visibility.svg?react";
import VisibilityOff from "@material-symbols/svg-400/rounded/visibility_off.svg?react";

import LinkIcon from "@material-symbols/svg-400/rounded/link.svg?react";
import PersonSearch from "@material-symbols/svg-400/rounded/person_search.svg?react";
import MeetingRoom from "@material-symbols/svg-400/rounded/meeting_room.svg?react";
import DoorOpen from "@material-symbols/svg-400/rounded/door_open.svg?react";
import History from "@material-symbols/svg-400/rounded/history.svg?react";
import School from "@material-symbols/svg-400/rounded/school.svg?react";
import HourglassTop from "@material-symbols/svg-400/rounded/hourglass_top.svg?react";
import TravelExplore from "@material-symbols/svg-400/rounded/travel_explore.svg?react";
import TravelExploreFill from "@material-symbols/svg-400/rounded/travel_explore-fill.svg?react";

type Svg = ComponentType<SVGProps<SVGSVGElement>>;

const icons = {
  arrow_forward: ArrowForward,
  calendar_month: CalendarMonth,
  check: Check,
  chevron_left: ChevronLeft,
  chevron_right: ChevronRight,
  close: Close,
  cloud_off: CloudOff,
  description: Description,
  download: Download,
  error: ErrorIcon,
  event_busy: EventBusy,
  event_repeat: EventRepeat,
  filter_list: FilterList,
  folder_open: FolderOpen,
  groups: Groups,
  info: Info,
  keyboard_arrow_down: KeyboardArrowDown,
  location_on: LocationOn,
  mobile_arrow_down: MobileArrowDown,
  more_horiz: MoreHoriz,
  more_vert: MoreVert,
  open_in_new: OpenInNew,
  person: Person,
  refresh: Refresh,
  schedule: Schedule,
  search: Search,
  search_off: SearchOff,
  upload_file: UploadFile,
  content_copy: ContentCopy,
  difference: Difference,
  share: Share,
  visibility: Visibility,
  visibility_off: VisibilityOff,
  link: LinkIcon,
  person_search: PersonSearch,
  meeting_room: MeetingRoom,
  door_open: DoorOpen,
  history: History,
  school: School,
  hourglass_top: HourglassTop,
  travel_explore: TravelExplore,
} satisfies Record<string, Svg>;

// Filled variants for selected states (navigation, toggles), per Material Symbols FILL axis.
const filled: Partial<Record<IconName, Svg>> = {
  calendar_month: CalendarMonthFill,
  groups: GroupsFill,
  travel_explore: TravelExploreFill,
};

export type IconName = keyof typeof icons;

export function Icon({
  name,
  size = 24,
  fill = false,
  className,
}: {
  name: IconName;
  size?: number;
  fill?: boolean;
  className?: string;
}) {
  const Glyph = (fill && filled[name]) || icons[name];
  return (
    <Glyph
      className={className ? `icon ${className}` : "icon"}
      width={size}
      height={size}
      aria-hidden="true"
      focusable="false"
    />
  );
}