import { CSSProperties, ReactNode } from "react";
import clsx from "clsx";

import {
  AlertCircleIcon,
  ArticleIcon,
  ChatIcon,
  CheckIcon,
  ChevronIcon,
  ChevronLeftIcon,
  ChevronRightIcon,
  ClipboardIcon,
  ClockIcon,
  CrossIcon,
  HeartIcon,
  HomeIcon,
  ImageIcon,
  LeafIcon,
  LoaderIcon,
  MenuIcon,
  MicrophoneIcon,
  NotificationIcon,
  PaperAirplaneIcon,
  PinIcon,
  ReadStatusIcon,
  SearchIcon,
  ShieldIcon,
  StarIcon,
  ThunderboltIcon,
  VideoIcon,
} from "./icons";

export enum IconName {
  AlertCircle,
  Notification,
  Search,
  Menu,
  Article,
  Video,
  Chevron,
  Star,
  Cross,
  Home,
  Chat,
  Clipboard,
  Heart,
  Leaf,
  Microphone,
  Image,
  ReadStatus,
  Pin,
  ChevronLeft,
  ChevronRight,
  Clock,
  PaperAirplane,
  Check,
  Thunderbolt,
  Shield,
  Loader,
}

const icons: Record<
  IconName,
  React.ComponentType<React.SVGProps<SVGSVGElement>>
> = {
  [IconName.AlertCircle]: AlertCircleIcon,
  [IconName.Notification]: NotificationIcon,
  [IconName.Search]: SearchIcon,
  [IconName.Menu]: MenuIcon,
  [IconName.Article]: ArticleIcon,
  [IconName.Video]: VideoIcon,
  [IconName.Chevron]: ChevronIcon,
  [IconName.Star]: StarIcon,
  [IconName.Cross]: CrossIcon,
  [IconName.Home]: HomeIcon,
  [IconName.Chat]: ChatIcon,
  [IconName.Clipboard]: ClipboardIcon,
  [IconName.Heart]: HeartIcon,
  [IconName.Leaf]: LeafIcon,
  [IconName.Microphone]: MicrophoneIcon,
  [IconName.Image]: ImageIcon,
  [IconName.ReadStatus]: ReadStatusIcon,
  [IconName.Pin]: PinIcon,
  [IconName.ChevronLeft]: ChevronLeftIcon,
  [IconName.ChevronRight]: ChevronRightIcon,
  [IconName.Clock]: ClockIcon,
  [IconName.PaperAirplane]: PaperAirplaneIcon,
  [IconName.Check]: CheckIcon,
  [IconName.Thunderbolt]: ThunderboltIcon,
  [IconName.Shield]: ShieldIcon,
  [IconName.Loader]: LoaderIcon,
};

export type IconProps = {
  name: IconName;
  size?: {
    height: number | string;
    width: number | string;
  };
  color?: string;
  className?: string;
  children?: ReactNode;
  cursor?: "pointer" | "auto";
  iconStyle?: CSSProperties;
  style?: CSSProperties;
  iconChildren?: ReactNode;
};

export default function Icon({
  name,
  size = {
    height: 24,
    width: 24,
  },
  color = "currentColor",
  className,
  children,
  cursor = "pointer",
  style,
  iconChildren,
  ...rest
}: IconProps) {
  const Component = icons[name];
  return (
    <span
      style={{
        position: "relative",
        display: "inline-block",
        cursor,
        width: size.width,
        height: size.height,
        ...style,
      }}
      className={clsx(className)}
    >
      <Component
        width={size.width}
        height={size.height}
        color={color}
        aria-hidden="true"
        {...rest}
        style={{
          display: "block",
          ...rest.iconStyle,
        }}
      >
        {iconChildren}
      </Component>
      {children}
    </span>
  );
}
