import { useMemo } from "react";
import { IconButtonStyle } from "./IconButton.styled";
import { primary, gray } from "../../core/colors/colors";
import { ButtonOptionTypes } from "..";

export type IconButtonOptionTypes = Exclude<
  ButtonOptionTypes,
  "ERROR" | "ERROR_SMOOTH" | "ERROR_GHOST"
>;

export type IconButtonProps = {
  option?: IconButtonOptionTypes;
  onClick: () => void;
  icon?: JSX.Element;
  disable?: boolean;
  borderColor?: string;
  backgroundColor?: string;
  stroke?: string;
};

const IconButton = ({
  option,
  onClick,
  icon,
  disable = false,
  borderColor = "",
  backgroundColor = "",
  stroke = "",
}: IconButtonProps) => {
  const status: IconButtonOptionTypes = useMemo(() => {
    if (disable) return "DISABLE";
    if (option) return option;
    return "DEFAULT";
  }, [option, disable]);

  const style: {
    [key in IconButtonOptionTypes]: {
      [style in "borderColor" | "backgroundColor" | "stroke"]: string;
    };
  } = {
    DEFAULT: {
      borderColor: primary[500],
      backgroundColor: primary[500],
      stroke: "#FFF",
    },
    DEFAULT_SMOOTH: {
      borderColor: primary[100],
      backgroundColor: primary[100],
      stroke: primary[500],
    },
    DEFAULT_GHOST: {
      borderColor: primary[500],
      backgroundColor: "#FFF",
      stroke: primary[500],
    },
    DISABLE: {
      borderColor: gray[400],
      backgroundColor: gray[100],
      stroke: gray[400],
    },
  };

  return (
    <IconButtonStyle
      onClick={() => onClick()}
      disabled={disable}
      style={{
        ...style[status],
        borderColor: borderColor || style[status].borderColor,
        backgroundColor: backgroundColor || style[status].backgroundColor,
      }}
      stroke={stroke || style[status].stroke}
    >
      {icon}
    </IconButtonStyle>
  );
};

export default IconButton;
