"use client";
import React, { useState } from "react";
import TopHeader from "@/app/components/topHeader/TopHeader";
import globalStyle from "../../globalStyle.module.css";
import addRoleStyle from "./styles.module.css";
import TextField from "@/app/components/fields/textfield";
import Permissions from "@/app/components/permissions/Permissions";
import useUserForm from "@/app/hooks/useUserForm";
import Alert from "@/app/components/alerts/Alert";
import Toggle from "@/app/components/mobileToggleTab/Toggle";

const AddRolePage = () => {
  // Mobile
  const [activeTab, setActiveTab] = useState("details");
  const {
    register,
    handleSubmit,
    errors,
    onSubmit,
    triggerAlert,
    setTriggerAlert,
  } = useUserForm();
  return (
    <div className={globalStyle.section}>
      {triggerAlert && (
        <Alert
          setTriggerAlert={setTriggerAlert}
          onClick={() => setEditState(true)}
          title="Add Role"
        />
      )}
      <div className={globalStyle.mainContainer}>
        <div className={globalStyle.container}>
          <TopHeader
            buttonText="Save"
            cancelButtonText="Cancel"
            topbarTitle="Add Role"
            state="add"
            requiredButtons={["title", "save"]}
          />
          <div className={addRoleStyle.addRoleContainer}>
            <Toggle
              activeTab={activeTab}
              onChange={setActiveTab}
              tabs={[
                { label: "Role Details", value: "details" },
                { label: "Permissions", value: "permissions" },
              ]}
            />
            {/* Input fields Container  */}
            <div className={addRoleStyle.inputFieldContainer}>
              {/* User Details */}
              <div
                className={`${addRoleStyle.roleDetails} ${activeTab !== "details" ? addRoleStyle.hiddenMobile : ""}`}
              >
                <div className={addRoleStyle.header}>
                  <div>
                    <p>Role Details</p>
                  </div>
                </div>
                {/* Ibalhin ning form na tag */}
                <form
                  className={addRoleStyle.fields}
                  id="form"
                  onSubmit={handleSubmit(onSubmit)}
                >
                  <div className={addRoleStyle.inputMainContainer}>
                    <div className={addRoleStyle.inputContainer}>
                      <div className={addRoleStyle.label}>
                        <p>Name</p>
                      </div>
                      <div className={addRoleStyle.inputField}>
                        <TextField
                          placeHolder="Enter name"
                          {...register("roleName", { required: true })}
                          hasError={!!errors.roleName}
                        />
                      </div>
                    </div>
                  </div>
                  <div className={addRoleStyle.inputMainContainer}>
                    <div className={addRoleStyle.inputContainer}>
                      <div className={addRoleStyle.label}>
                        <p>Organization ID</p>
                      </div>
                      <div className={addRoleStyle.inputField}>
                        <TextField
                          placeHolder="Enter organization ID"
                          {...register("organizationID", { required: true })}
                          hasError={!!errors.organizationID}
                        />
                      </div>
                    </div>
                  </div>
                </form>
              </div>

              {/* Permissions */}
              <div
                className={`${addRoleStyle.userPermissions} ${activeTab !== "permissions" ? addRoleStyle.hiddenMobile : ""}`}
              >
                <div className={addRoleStyle.imanginaryDiv}></div>
                <Permissions />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default AddRolePage;