import { ButtonStyle } from "./Button.styled";
import { useMemo } from "react";
import { primary, red, gray } from "../../core/colors/colors";

export type ButtonOptionTypes =
  | "DEFAULT"
  | "DEFAULT_SMOOTH"
  | "DEFAULT_GHOST"
  | "ERROR"
  | "ERROR_SMOOTH"
  | "ERROR_GHOST"
  | "DISABLE";

export type ButtonProps = {
  option?: ButtonOptionTypes;
  children: string;
  type?: "submit";
  onClick: () => void;
  isError?: boolean;
  disable?: boolean;
  leftIcon?: JSX.Element;
  rightIcon?: JSX.Element;
  borderColor?: string;
  color?: string;
  backgroundColor?: string;
  // stroke?: string;
};

const Button = ({
  option,
  children,
  type = "submit",
  onClick,
  isError = false,
  disable = false,
  leftIcon,
  rightIcon,
  borderColor = "",
  color = "",
  backgroundColor = "",
}: ButtonProps) => {
  const status: ButtonOptionTypes = useMemo(() => {
    if (isError) return "ERROR";
    if (disable) return "DISABLE";
    if (option) return option;
    return "DEFAULT";
  }, [option, isError, disable]);

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

  return (
    <ButtonStyle
      type={type}
      onClick={() => onClick()}
      disabled={disable}
      style={{
        ...style[status],
        borderColor: borderColor || style[status].borderColor,
        color: color || style[status].color,
        backgroundColor: backgroundColor || style[status].backgroundColor,
      }}
      stroke={color || style[status].stroke}
    >
      {leftIcon && leftIcon}
      {children}
      {rightIcon && rightIcon}
    </ButtonStyle>
  );
};

export default Button;
