import { IconFont } from '@/components/icon-font';
import { cn } from '@/lib/utils';
import {
  Blocks,
  FileChartColumnIncreasing,
  Heading,
  HousePlus,
  ListMinus,
} from 'lucide-react';
import { Operator } from './constant';

interface IProps {
  name: Operator;
  className?: string;
}

export const OperatorIconMap = {
  [Operator.Begin]: 'house-plus',
  [Operator.Note]: 'notebook-pen',
};

export const SVGIconMap = {
  [Operator.Parser]: FileChartColumnIncreasing,
  [Operator.Tokenizer]: ListMinus,
  [Operator.Splitter]: Blocks,
  [Operator.HierarchicalMerger]: Heading,
};

const Empty = () => {
  return <div className="hidden"></div>;
};

const OperatorIcon = ({ name, className }: IProps) => {
  const Icon = OperatorIconMap[name as keyof typeof OperatorIconMap] || Empty;
  const SvgIcon = SVGIconMap[name as keyof typeof SVGIconMap] || Empty;

  if (name === Operator.Begin) {
    return (
      <div
        className={cn(
          'inline-block p-1 bg-accent-primary rounded-sm',
          className,
        )}
      >
        <HousePlus className="rounded size-3" />
      </div>
    );
  }

  return typeof Icon === 'string' ? (
    <IconFont name={Icon} className={cn('size-5 ', className)}></IconFont>
  ) : (
    <SvgIcon className="size-5"></SvgIcon>
  );
};

export default OperatorIcon;