import "./assets/css/styles.css";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import {
  faWindowClose,
  faEye,
  faEyeSlash,
} from "@fortawesome/free-solid-svg-icons";
import { useAdmin } from "../../../../domain/useCase/useAdmin";
import { usePasswoordVisibility } from "../../../../domain/useCase/usePasswordVisibility";
import { State } from "../../../../data/datasource/api/entities/state";
import { useTown } from "../../../../domain/useCase/useTown";

// Define the props interface for the component
interface props {
  handleClickToClose: () => void;
  forceRenderList: () => void;
  statesList: State[];
}

// Main component for registering a superadmin
export const SuperadminPanelAdminRegister = ({
  handleClickToClose,
  forceRenderList,
  statesList,
}: props) => {
  // Custom hook for handling admin registration
  const { register, errors, handleSubmit, onSubmit } = useAdmin(
    forceRenderList,
    handleClickToClose
  );

  // Custom hook for handling password visibility
  const { values, handleClickShowPassword, handleMouseDownPassword } =
    usePasswoordVisibility();

  // Custom hook for fetching towns based on selected state
  const { townsList, getTownsByState } = useTown();

  return (
    <div className="admin_register_wrap">
      <div className="admin_register_header">
        Registra el administrador
        <FontAwesomeIcon
          icon={faWindowClose}
          className="admin_register_close_btn"
          onClick={() => handleClickToClose()}
        />
      </div>
      <div className="admin_register_content">
        <form onSubmit={handleSubmit(onSubmit)} autoComplete="off">
          {/* Email input field */}
          <div className="admin_input_cnt">
            <label>Correo electronico</label>
            <input
              type="text"
              {...register("email")}
              autoComplete="off"
              maxLength={255}
            />
            <p className="error">{errors.email?.message}</p>
          </div>

          {/* Name input field */}
          <div className="admin_input_cnt">
            <label>Nombre</label>
            <input
              type="text"
              {...register("name")}
              autoComplete="off"
              maxLength={255}
            />
            <p className="error">{errors.name?.message}</p>
          </div>

          {/* Last name input field */}
          <div className="admin_input_cnt">
            <label>Apellido</label>
            <input
              type="text"
              {...register("lastName")}
              autoComplete="off"
              maxLength={255}
            />
            <p className="error">{errors.lastName?.message}</p>
          </div>

          {/* Password input field */}
          <div className="admin_input_cnt">
            <label>Contraseña</label>
            <input
              type={values.showPassword ? "text" : "password"}
              {...register("password")}
              autoComplete="off"
              maxLength={255}
            />
            <p className="error">{errors.password?.message}</p>
          </div>

          {/* Confirm password input field with visibility toggle */}
          <div className="admin_input_cnt">
            <label>Confirmar contraseña</label>
            <div className="password_input_visibility_cnt">
              <input
                type={values.showPassword ? "text" : "password"}
                {...register("confirmPassword")}
                autoComplete="off"
                maxLength={255}
              />
              <FontAwesomeIcon
                className="pass-visibility-button"
                onClick={handleClickShowPassword}
                onMouseDown={handleMouseDownPassword}
                icon={values.showPassword ? faEye : faEyeSlash}
              />
            </div>
            <p className="error">{errors.confirmPassword?.message}</p>
          </div>

          {/* State and town selection fields */}
          <div className="admin_input_cnt">
            <label>Pueblo mágico al que representa</label>
            <div>
              Estado
              <select
                name="state_select"
                onChange={(event) => {
                  getTownsByState(
                    Number(event.target.value),
                    event.target.options[event.target.selectedIndex].text
                  );
                }}
              >
                {statesList === null || statesList.length === 0 ? (
                  <option disabled defaultValue="" value="">
                    No hay estados
                  </option>
                ) : (
                  <>
                    <option disabled selected value="">
                      Selecciona el estado
                    </option>
                    {statesList.map((state) => {
                      return (
                        <option key={state.stateId} value={state.stateId}>
                          {state.name}
                        </option>
                      );
                    })}
                  </>
                )}
              </select>
            </div>
            <div>
              Pueblo mágico
              <select {...register("townAdmin")}>
                {townsList === null || townsList.length === 0 ? (
                  <option disabled defaultValue="" value="">
                    No hay pueblos
                  </option>
                ) : (
                  <>
                    <option disabled selected value="">
                      Selecciona el pueblo
                    </option>
                    {townsList.map((towns) => {
                      return (
                        <option key={towns.idTown} value={towns.idTown}>
                          {towns.name}
                        </option>
                      );
                    })}
                  </>
                )}
              </select>
            </div>
            <p className="error">{errors.townAdmin?.message}</p>
          </div>

          {/* Submit button */}
          <div className="admin_input_cnt">
            <input className="submit_btn" type="submit" content="Registrar" />
          </div>
        </form>
      </div>
    </div>
  );
};
