"use client";
import React from "react";
import globalStyle from "../../globalStyle.module.css";
import TopHeader from "@/app/components/topHeader/TopHeader";
import styles from "./styles.module.css";
import TopToolTip from "@/app/components/topToolTip/TopToolTip";
import TextField from "@/app/components/fields/textfield";
import SelectField from "@/app/components/select/SelectField";
import Prompts from "@/app/components/prompts/Prompts";
import Alert from "@/app/components/alerts/Alert";
import useProjectForm from "@/app/hooks/useProjectForm";
const AddProject = () => {
  const {
    register,
    handleSubmit,
    errors,
    onSubmit,
    triggerAlert,
    setTriggerAlert,
  } = useProjectForm();
  return (
    <div className={globalStyle.section}>
      {triggerAlert && (
        <Alert
          setTriggerAlert={setTriggerAlert}
          onClick={() => setEditState(true)}
          title="Create Organization"
        />
      )}
      <div className={globalStyle.mainContainer}>
        <div className={globalStyle.container}>
          <TopHeader
            buttonText="Save"
            cancelButtonText="Cancel"
            state="add"
            topbarTitle="Create New Project"
            requiredButtons={["title", "save"]}
          />
          <div className={styles.contentContainer}>
            <TopToolTip />
            <form
              className={styles.createProjectFormContainer}
              id="form"
              onSubmit={handleSubmit(onSubmit)}
            >
              <div className={styles.inputGroup}>
                <div className={styles.label}>
                  <p>
                    Project Name <span>*</span>
                  </p>
                </div>
                <div className={styles.inputField}>
                  <TextField
                    placeHolder="Enter project name"
                    {...register("projectName", { required: true })}
                    hasError={!!errors.projectName}
                  />
                  <Prompts show={false} />
                </div>
              </div>
              <div className={styles.inputGroup}>
                <div className={styles.label}>
                  <p>
                    Project Version <span>*</span>
                  </p>
                </div>
                <div className={styles.inputField}>
                  <TextField
                    placeHolder="Version"
                    {...register("projectVersion", { required: true })}
                    hasError={!!errors.projectVersion}
                  />
                </div>
              </div>
              <div className={styles.inputGroup}>
                <div className={styles.label}>
                  <p>
                    Organization <span>*</span>
                  </p>
                </div>
                <div className={styles.inputField}>
                  <SelectField
                    label="Select"
                    options={[
                      { label: "Option", value: "option" },
                      { label: "Option 1", value: "option 1" },
                      { label: "Option 2", value: "option 2" },
                    ]}
                  />
                </div>
              </div>
              <div className={styles.inputGroup}>
                <div className={styles.label}>
                  <p>
                    Agent <span>*</span>
                  </p>
                </div>
                <div className={styles.inputField}>
                  <SelectField
                    label="Select"
                    options={[
                      { label: "Option", value: "option" },
                      { label: "Option 1", value: "option 1" },
                      { label: "Option 2", value: "option 2" },
                    ]}
                  />
                </div>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  );
};

export default AddProject;
