import Eye from "../../assets/svgs/eye.svg";
import EyeOff from "../../assets/svgs/eye-off.svg";
import { InputProps, InputStatus } from "../..";
import { useMemo, useState } from "react";
import { gray, red, blue } from "../../../../core/colors/colors";
import { InputContainer, InputStyle } from "../../Input.styled";
import { EyeButton } from "./PasswordInput.styled";

export type PasswordInputProps = Omit<InputProps, "type"> & {
  type?: "text" | "password";
};

const PasswordInput = ({
  type = "password",
  value,
  onChange,
  onError = () => false,
  placeholder,
}: PasswordInputProps) => {
  const [isVisible, setIsVisible] = useState<boolean>(false);
  const [isFocus, setIsFocus] = useState<boolean>(false);
  const status: InputStatus = useMemo(() => {
    if (onError()) return "ERROR";
    if (isFocus) return "FOCUS";
    return "DEFAULT";
  }, [isFocus, onError]);

  const style: { [key in InputStatus]: { [style in "borderColor"]: string } } =
    {
      DEFAULT: {
        borderColor: gray[300],
      },
      ERROR: {
        borderColor: red[500],
      },
      FOCUS: {
        borderColor: blue[500],
      },
    };

  return (
    <InputContainer>
      <InputStyle
        type={isVisible ? "text" : type}
        value={value}
        onChange={(e) => onChange(e)}
        onFocus={() => setIsFocus(true)}
        onBlur={() => setIsFocus(false)}
        onError={onError}
        placeholder={placeholder}
        style={{ ...style[status], paddingRight: value && "40px" }}
      />
      {value && (
        <EyeButton onClick={() => setIsVisible(!isVisible)}>
          {isVisible ? <Eye /> : <EyeOff />}
        </EyeButton>
      )}
    </InputContainer>
  );
};

export default PasswordInput;
