import { faWindowClose } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import "./assets/css/styles.css";
import { useCategory } from "../../../../domain/useCase/useCategory";

// Define the props interface for the component
interface props {
  handleClickToClose: () => void; // Function to handle closing the panel
  forceRenderList: () => void; // Function to force re-rendering the category list
}

// Define the SuperAdminPanelCategoryRegister component
export const SuperAdminPanelCategoryRegister = ({
  handleClickToClose,
  forceRenderList,
}: props) => {
  // Destructure the necessary functions and variables from useCategory hook
  const { register, handleSubmit, errors, onSubmit } = useCategory(
    forceRenderList,
    handleClickToClose
  );

  return (
    <div className="category_register_wrap">
      {/* Header section with title and close button */}
      <div className="category_register_header">
        Registra la categoría
        <FontAwesomeIcon
          icon={faWindowClose}
          className="category_register_close_btn"
          onClick={() => handleClickToClose()}
        />
      </div>
      <div className="category_register_body">
        {/* Form to register a new category */}
        <form onSubmit={handleSubmit(onSubmit)}>
          <div className="inputs_container">
            {/* Input for category name in Spanish */}
            <div className="input">
              <div className="input_header">
                Nombre de la categoría(español)
              </div>
              <input
                type="text"
                {...register("nameES")}
                autoComplete="off"
                maxLength={255}
              />
              <p className="error">{errors.nameES?.message}</p>
            </div>

            {/* Input for category name in English */}
            <div className="input">
              <div className="input_header">Nombre de la categoría(inglés)</div>
              <input
                type="text"
                {...register("nameEN")}
                autoComplete="off"
                maxLength={255}
              />
              <p className="error">{errors.nameEN?.message}</p>
            </div>

            {/* Submit button */}
            <input type="submit" />
          </div>
        </form>
      </div>
    </div>
  );
};
