Frontend-Internal-Developer-Platform/frontend/src/app/projects/view/[servicesId]/projectDetails.jsx

"use client";
import React, { useState } from "react";
import styles from "./styles.module.css";
import TextField from "@/app/components/fields/textfield";
import CustomCheckbox from "@/app/components/checkbox/CheckBox";
import SelectField from "@/app/components/select/SelectField";
import RadioButton from "@/app/components/radio-button/RadioButton";

const ProjectDetails = ({
  register,
  handleSubmit,
  errors,
  onSubmit,
  triggerAlert,
  disableScaling,
  disableReadiness,
  disableLiveness,
  setDisableScaling,
  setDisableReadiness,
  setDisableLiveness,
  setTriggerAlert,
  minPods,
  maxPods,
  readinessPath,
  readinessPort,
  livenessPort,
  livenessPath,
  setIsEnableIngress,
  isEnableIngress,
  ...props
}) => {
  return (
    <form {...props} id="form" onSubmit={handleSubmit(onSubmit)}>
      <div className={styles.projectDetails}>
        <div className={styles.projectDetailsHeader}>
          <p>Project Details</p>
        </div>
        <div className={styles.fieldsCreateNew}>
          <div className={styles.inputGroup}>
            <div>
              <p>Name</p>
              <TextField
                placeHolder="Enter service name"
                {...register("serviceName", { required: true })}
                hasError={!!errors.serviceName}
              />
            </div>
            <div>
              <p>Version</p>
              <TextField
                placeHolder="Service version"
                {...register("serviceVersion", { required: true })}
                hasError={!!errors.serviceVersion}
              />
            </div>
          </div>
          <div>
            <div>
              <p>
                Image <span>(Optional)</span>
              </p>
              <TextField
                placeHolder="Enter image name"
                {...register("imageName", { required: false })}
                hasError={!!errors.imageName}
              />
            </div>
          </div>
          <div>
            <div>
              <p>Port</p>
              <TextField
                placeHolder="Enter port"
                {...register("port", { required: true })}
                hasError={!!errors.port}
              />
            </div>
          </div>
          <div>
            <div>
              <p>Ingress</p>
              <div className={styles.radioButtonContainer}>
                <div>
                  <RadioButton
                    label="Enable"
                    name="isEnable"
                    value="true"
                    checked={isEnableIngress === true}
                    onChange={(e) =>
                      setIsEnableIngress(e.target.value === "true")
                    }
                  />
                  <RadioButton
                    label="Disable"
                    name="isEnable"
                    value="false"
                    checked={isEnableIngress === false}
                    onChange={(e) =>
                      setIsEnableIngress(e.target.value === "true")
                    }
                  />
                </div>
              </div>
            </div>
          </div>

          {isEnableIngress && (
            <>
              <div>
                <div>
                  <p>Sub Domain</p>
                  <TextField
                    placeHolder="Subdomain-"
                    {...register("subDomain", { required: isEnableIngress })}
                    hasError={!!errors.imageName}
                  />
                </div>

                <div>
                  <p>Sub Domain</p>
                  <TextField
                    placeHolder="Subdomain-"
                    {...register("subDomain", { required: isEnableIngress })}
                    hasError={!!errors.imageName}
                  />
                </div>
              </div>
              <div>
                <div>
                  <p>
                    Allowed Ips <span>(Optional)</span>
                  </p>
                  <textarea
                    className={styles.textarea}
                    name=""
                    id=""
                    placeholder="Enter allowed IP addresses (comma-separated, e.g., 192.168.1.1, 10.0.0.0/24)"
                  ></textarea>
                </div>
              </div>
            </>
          )}
        </div>
      </div>
      <div className={styles.resource}>
        <div className={styles.projectDetailsHeader}>
          <p>Resource</p>
        </div>
        <div className={styles.resourceFields}>
          <div className={styles.inputGroup}>
            <div>
              <p>CPU Request (MB)</p>
              <TextField
                placeHolder="250"
                {...register("cpuRequest", { required: true })}
                hasError={!!errors.cpuRequest}
              />
            </div>
            <div>
              <p>CPU Limit (MB)</p>
              <TextField
                placeHolder="250"
                {...register("cpuLimit", { required: true })}
                hasError={!!errors.cpuLimit}
              />
            </div>
          </div>
          <div className={styles.inputGroup}>
            <div>
              <p>Memory Request (MB)</p>
              <TextField
                placeHolder="250"
                {...register("memoryRequest", { required: true })}
                hasError={!!errors.memoryRequest}
              />
            </div>
            <div>
              <p>Memory Limit (MB)</p>
              <TextField
                placeHolder="500"
                {...register("memoryLimit", { required: true })}
                hasError={!!errors.memoryLimit}
              />
            </div>
          </div>
        </div>
      </div>
      <div className={styles.additionalDetails}>
        <div>
          <div>
            <div className={styles.additionalDetailsHeader}>
              <div>
                <p>Auto Scaling</p>
                <CustomCheckbox
                  id="scalingCheckBox"
                  setChecked={() => setDisableScaling(!disableScaling)}
                />
              </div>
            </div>
            <div className={styles.additionalDetailsFields}>
              <div>
                <div className={styles.inputGroup}>
                  <div>
                    <p>Minimum pods</p>

                    <TextField
                      placeHolder="1"
                      disabled={disableScaling}
                      {...register("minPods", {
                        required: maxPods.trim() !== "" && !disableScaling,
                      })}
                      hasError={!!errors.minPods}
                    />
                  </div>
                  <div>
                    <p>Maximum pods</p>
                    <TextField
                      placeHolder="1"
                      disabled={disableScaling}
                      {...register("maxPods", {
                        required: minPods.trim() !== "" && !disableScaling,
                      })}
                      hasError={!!errors.maxPods}
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div>
          <div>
            <div className={styles.additionalDetailsHeader}>
              <div>
                <p>Readiness</p>
                <CustomCheckbox
                  id="readiNessCheckBox"
                  setChecked={() => setDisableReadiness(!disableReadiness)}
                />
              </div>
            </div>
            <div className={styles.additionalDetailsFields}>
              <div>
                <div className={styles.inputGroup}>
                  <div>
                    <p>Readiness Path</p>

                    <TextField
                      placeHolder="Enter Readiness path"
                      disabled={disableReadiness}
                      {...register("readinessPath", {
                        required:
                          readinessPort.trim() !== "" && !disableReadiness,
                      })}
                      hasError={!!errors.readinessPath}
                    />
                  </div>
                  <div>
                    <p>Readiness Port</p>
                    <TextField
                      placeHolder="Enter Readiness port"
                      disabled={disableReadiness}
                      {...register("readinessPort", {
                        required:
                          readinessPath.trim() !== "" && !disableReadiness,
                      })}
                      hasError={!!errors.readinessPort}
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div>
          <div>
            <div className={styles.additionalDetailsHeader}>
              <div>
                <p>Liveness</p>
                <CustomCheckbox
                  id="liveNessCheckBox"
                  setChecked={() => setDisableLiveness(!disableLiveness)}
                />
              </div>
            </div>
            <div className={styles.additionalDetailsFields}>
              <div>
                <div className={styles.inputGroup}>
                  <div>
                    <p>Liveness Path</p>
                    <TextField
                      placeHolder="Enter liveness path"
                      disabled={disableLiveness}
                      {...register("livenessPath", {
                        required:
                          livenessPort.trim() !== "" && !disableLiveness,
                      })}
                      hasError={!!errors.livenessPath}
                    />
                  </div>
                  <div>
                    <p>Liveness Port</p>
                    <TextField
                      placeHolder="Enter liveness port"
                      disabled={disableLiveness}
                      {...register("livenessPort", {
                        required:
                          livenessPath.trim() !== "" && !disableLiveness,
                      })}
                      hasError={!!errors.livenessPort}
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </form>
  );
};

export default ProjectDetails;