import React, { cloneElement, type ReactElement } from "react";
import { Chip as MUIChip, type ChipProps as MUIChipProps } from "@mui/material";
import { twJoin } from "tailwind-merge";

import { Icon, type IconProps } from "../icon/Icon";
import type { AvatarProps } from "../avatar/Avatar";
import { twMerge } from "../../../tailwind.config";

export interface ChipProps
  extends Omit<
    MUIChipProps,
    "color" | "clickable" | "classes" | "size" | "variant" | "className"
  > {
  icon?: ReactElement<IconProps> | ReactElement;
  avatar?: ReactElement<AvatarProps>;
  size?: "28" | "20";
  ESCAPE_className?: string;
}

export function useChipStyles(size: ChipProps["size"]) {
  const classes = {
    root: twJoin(
      "bg-N20A outline-N20A -outline-offset-1 outline-1 outline rounded-6 text-N700 max-w-full",
      size === "28" && "h-28 p-4",
      size === "20" && "h-20 px-2",
      "focus:bg-N20A focus:border-B200 focus:ring-3 focus:ring-B400FR",
      "group/chip"
    ),
    label: twJoin(
      "text-style-R200",
      size === "28" && "px-2",
      size === "20" && "pl-2 pr-0 last:pr-2"
    ),
    deleteIcon: twJoin(
      "w-[unset] h-[unset] flex p-2 m-0 box-border text-N100 hover:text-N700",
      "group-aria-disabled/chip:text-N60 group-aria-disabled/chip:hover:bg-[unset] group/chip-icon"
    ),
    deleteIconSvg: "box-content p-2 rounded-4 group-hover/chip-icon:bg-N20A",
    disabled: twJoin(
      "bg-N20A border-transparent aria-disabled:text-N60 opacity-100"
    ),
    avatar: twJoin(
      "ml-2",
      size === "28" && "w-20 h-20 mr-4",
      size === "20" && "w-16 h-16 mr-2",
      "group-aria-disabled/chip:opacity-30"
    ),
    icon: twJoin(
      "text-[inherit] ml-[1px]",
      size === "28" && "w-20 h-20 mr-[1px]",
      size === "20" && "w-16 h-16 mr-0"
    ),
    iconSvg: "w-full h-full",
  };

  return classes;
}

export function Chip({
  avatar = undefined,
  icon = undefined,
  disabled = false,
  size = "28",
  ESCAPE_className,
  ...restProps
}: ChipProps) {
  const { iconSvg, deleteIconSvg, ...classes } = useChipStyles(size);

  return (
    <MUIChip
      avatar={
        avatar && (
          <div>
            {cloneElement(avatar, {
              size: size === "28" ? 20 : 16,
              ...avatar.props,
            })}
          </div>
        )
      }
      icon={
        icon && (
          <div>
            {cloneElement(icon, {
              weight: "medium",
              color: "current",
              ESCAPE_className: twMerge(iconSvg, icon.props?.ESCAPE_className),
              ...icon.props,
            })}
          </div>
        )
      }
      clickable={false}
      classes={{ ...classes, root: twMerge(classes.root, ESCAPE_className) }}
      disabled={disabled}
      tabIndex={disabled ? undefined : 0}
      deleteIcon={
        <div>
          <Icon
            name="xmark"
            weight="bold"
            size="12"
            ESCAPE_className={deleteIconSvg}
          />
        </div>
      }
      aria-disabled={disabled}
      {...restProps}
    />
  );
}
