import { memo, useRef, useState } from "react";
import styles from "@/components/administrator/form/form.module.css";

import { PiEyeSlashLight, PiEyeLight } from "react-icons/pi";

/**
 * A generic input component with a label and a visible password toggle.
 * @type {React.FC<React.InputHTMLAttributes<HTMLInputElement> & {
 *   label: string;
 *   icon?: React.ReactNode;
 *   error?: {
 *     status: boolean;
 *     message: string;
 *   };
 *   format?: {
 *     label: string;
 *     action: Function;
 *     changeInput: boolean;
 *   };
 *   continouslyFrom: string;
 *   tip: string;
 *   required: boolean;
 *   className?: string;
 *   labelclassname?: string;
 *   type?: "password";
 *   ref?: React.Ref<HTMLInputElement>;
 *   onChange?: React.ChangeEventHandler<HTMLInputElement>;
 *   onInput?: React.ChangeEventHandler<HTMLInputElement>;
 *   name?: string;
 *   placeholder?: string;
 *   defaultValue?: string | number | readonly string[];
 *   value?: string | number | readonly string[];
 *   disabled?: boolean;
 * }>}
 */
const InputComponent = (props) => {
  const inputref = useRef(null);
  const [showPassword, setShowPassword] = useState(false);
  const visibility = {
    true: { type: "text", icon: <PiEyeLight /> },
    false: { type: "password", icon: <PiEyeSlashLight /> },
  };

  return (
    <div className={styles.input_container}>
      <div className={styles.input_header}>
        <p className={`${styles.label} ${props.labelclassname}`}>
          {props.label}
          {props?.required && <span className={styles.required}>*</span>}
        </p>
        {props.format && (
          <div
            className={`${styles.format} ${props.labelclassname}`}
            onClick={(e) => {
              if (
                props.format.action &&
                typeof props.format.action === "function"
              ) {
                const value = props.format.action(inputref.current);
                if (props.format.changeInput) inputref.current.value = value;
              }
            }}>
            {props.format?.label}
          </div>
        )}
      </div>
      <div
        className={`${styles.wrapper} ${
          props?.error?.status ? styles.error : ""
        } ${props.className}`}>
        {props.icon && <>{props.icon}</>}
        {props?.continouslyFrom && (
          <span className={styles.continouslyFrom}>
            {props.continouslyFrom}
          </span>
        )}
        <input
          ref={(el) => {
            inputref.current = el;

            if (props?.ref && typeof props.ref === "function")
              return props.ref(el);

            if (props?.ref) props.ref.current = el;
          }}
          autoComplete={props?.type === "password" ? "new-password" : "off"}
          className={styles.input}
          type={
            props?.type === "password"
              ? visibility[showPassword].type
              : props.type
          }
          onChange={props.onChange}
          onInput={props.onInput}
          name={props.name}
          placeholder={props.placeholder}
          defaultValue={props?.defaultValue}
          value={props?.value}
          disabled={props?.disabled}
        />
        {props?.type === "password" && (
          <div
            className={styles.visible_password}
            onClick={(e) => {
              e.preventDefault();
              setShowPassword(!showPassword);
            }}>
            {visibility[showPassword].icon}
          </div>
        )}
      </div>
      {props?.tip && <p className={styles.tip}>*{props?.tip}</p>}
      {props?.error?.status && props?.error?.message && (
        <p className={styles.error_message}>{props?.error?.message}</p>
      )}
    </div>
  );
};

const Input = memo(InputComponent);
export default Input;
