"use client";
import React, { useState } from "react";
import globalStyle from "@/app/globalStyle.module.css";
import TopHeader from "@/app/components/topHeader/TopHeader";
import styles from "./styles.module.css";
import variableStyles from "./variableStyles.module.css";
import TextField from "@/app/components/fields/textfield";
import AddVariableModal from "../variableModals/AddVariableModal/AddVariableModal";
import AddVolumeModal from "../variableModals/AddVolumes/AddVolumeModal";
import AddConfigMapModal from "../variableModals/AddConfigMap/AddConfigMapModal";
import CustomCheckbox from "@/app/components/checkbox/CheckBox";
import DeleteIcon from "@/app/components/icons/delete";
import SelectField from "@/app/components/select/SelectField";
const AddServices = () => {
  const [triggerVariableDropDown, setTriggerVariableDropDown] = useState(false);
  const [triggerAddVariable, setTriggerAddVariable] = useState(false);
  const [triggerAddVolume, setTriggerAddVolume] = useState(false);
  const [triggeAddConfigMap, setTriggerAddConfigMap] = useState(false);
  const sampleData = [
    { id: 1, key: "REQUEST_SERVICE_GRPC", value: "request-service:50053" },
    { id: 1, key: "REQUEST_SERVICE_GRPC", value: "request-service:50053" },
    { id: 1, key: "REQUEST_SERVICE_GRPC", value: "request-service:50053" },
    { id: 1, key: "REQUEST_SERVICE_GRPC", value: "request-service:50053" },
    { id: 1, key: "REQUEST_SERVICE_GRPC", value: "request-service:50053" },
    { id: 1, key: "REQUEST_SERVICE_GRPC", value: "request-service:50053" },
  ];
  return (
    <div className={globalStyle.section}>
      {triggerAddVariable && (
        <AddVariableModal setTriggerAddVariable={setTriggerAddVariable} />
      )}
      {triggerAddVolume && (
        <AddVolumeModal setTriggerAddVolume={setTriggerAddVolume} />
      )}
      {triggeAddConfigMap && (
        <AddConfigMapModal setTriggerAddConfigMap={setTriggerAddConfigMap} />
      )}
      <div className={globalStyle.mainContainer}>
        <div className={globalStyle.container}>
          <TopHeader
            buttonText="Save"
            cancelButtonText="Cancel"
            state="view"
            topbarTitle="View Services"
          />
          <div className={styles.contentContainer}>
            <div className={styles.fieldsContainerCreateNew}>
              <div className={styles.projectDetails}>
                <div className={styles.projectDetailsHeader}>
                  <p>Project Details</p>
                </div>
                <div className={styles.fieldsCreateNew}>
                  <div>
                    <div>
                      <p>Name</p>
                      <TextField placeHolder="Enter service name" />
                    </div>
                    <div>
                      <p>Version</p>
                      <TextField placeHolder="Service version" />
                    </div>
                  </div>
                  <div>
                    <div>
                      <p>
                        Image <span>(Optional)</span>
                      </p>
                      <TextField placeHolder="Enter image name" />
                    </div>
                  </div>
                  <div>
                    <div>
                      <p>Port</p>
                      <TextField placeHolder="Enter port" />
                    </div>
                  </div>
                  <div>
                    <div>
                      <p>Ingress</p>
                      <SelectField
                        label="Select"
                        options={[
                          { label: "Option", value: "option" },
                          { label: "Option 1", value: "option 1" },
                          { label: "Option 2", value: "option 2" },
                        ]}
                      />
                    </div>
                    <div>
                      <p>Ingress</p>
                      <SelectField
                        label="Select"
                        options={[
                          { label: "Option", value: "option" },
                          { label: "Option 1", value: "option 1" },
                          { label: "Option 2", value: "option 2" },
                        ]}
                      />
                    </div>
                  </div>
                </div>
              </div>
              <div className={styles.resource}>
                <div className={styles.projectDetailsHeader}>
                  <p>Resource</p>
                </div>
                <div className={styles.resourceFields}>
                  <div>
                    <div>
                      <p>CPU Request (MB)</p>
                      <TextField placeHolder="250" />
                    </div>
                    <div>
                      <p>CPU Limit (MB)</p>
                      <TextField placeHolder="250" />
                    </div>
                  </div>
                  <div>
                    <div>
                      <p>Memory Request (MB)</p>
                      <TextField placeHolder="250" />
                    </div>
                    <div>
                      <p>Memory Limit (MB)</p>
                      <TextField placeHolder="500" />
                    </div>
                  </div>
                </div>
              </div>
              <div className={styles.additionalDetails}>
                <div>
                  <div>
                    <div className={styles.additionalDetailsHeader}>
                      <div>
                        <p>Auto Scaling</p>
                        <CustomCheckbox id="scalingCheckBox" />
                      </div>
                    </div>
                    <div className={styles.additionalDetailsFields}>
                      <div>
                        <div>
                          <div>
                            <p>Minimum pods</p>

                            <TextField placeHolder="1" />
                          </div>
                          <div>
                            <p>Maximum pods</p>
                            <TextField placeHolder="1" />
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div>
                  <div>
                    <div className={styles.additionalDetailsHeader}>
                      <div>
                        <p>Readiness</p>
                        <CustomCheckbox id="readiNessCheckBox" />
                      </div>
                    </div>
                    <div className={styles.additionalDetailsFields}>
                      <div>
                        <div>
                          <div>
                            <p>Readiness Path</p>
                            <TextField placeHolder="Enter Readiness path" />
                          </div>
                          <div>
                            <p>Readiness Port</p>
                            <TextField placeHolder="Enter Readiness port" />
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div>
                  <div>
                    <div className={styles.additionalDetailsHeader}>
                      <div>
                        <p>Liveness</p>
                        <CustomCheckbox id="liveNessCheckBox" />
                      </div>
                    </div>
                    <div className={styles.additionalDetailsFields}>
                      <div>
                        <div>
                          <div>
                            <p>Liveness Path</p>
                            <TextField placeHolder="Enter liveness path" />
                          </div>
                          <div>
                            <p>Liveness Port</p>

                            <TextField placeHolder="Enter liveness port" />
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div className={variableStyles.variables}>
              <div className={variableStyles.variablesHeader}>
                <div>
                  <div className={variableStyles.searchContainer}>
                    <div className={variableStyles.searchInputGroup}>
                      <svg
                        width="20"
                        height="20"
                        viewBox="0 0 20 20"
                        fill="none"
                      >
                        <g clipPath="url(#clip0)">
                          <path
                            d="M8.66099 16.0271C12.7292 16.0271 16.0271 12.7292 16.0271 8.66099C16.0271 4.59282 12.7292 1.29492 8.66099 1.29492C4.59282 1.29492 1.29492 4.59282 1.29492 8.66099C1.29492 12.7292 4.59282 16.0271 8.66099 16.0271Z"
                            stroke="currentColor"
                            strokeWidth="2"
                            strokeLinecap="round"
                            strokeLinejoin="round"
                          />
                          <path
                            d="M18.7051 18.7061L14.0176 14.0186"
                            stroke="currentColor"
                            strokeWidth="2"
                            strokeLinecap="round"
                            strokeLinejoin="round"
                          />
                        </g>
                      </svg>
                      <input type="text" placeholder="Search" />
                    </div>
                  </div>
                  <div className={variableStyles.variablesHeaderDropDown}>
                    <div
                      className={variableStyles.variableHeaderDropdownButton}
                      onClick={() =>
                        setTriggerVariableDropDown(!triggerVariableDropDown)
                      }
                    >
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        width="24"
                        height="24"
                        viewBox="0 0 24 24"
                        fill="none"
                      >
                        <path
                          d="M12 5.29199V18.7087"
                          stroke="white"
                          strokeWidth="2"
                          strokeLinecap="round"
                          strokeLinejoin="round"
                        />
                        <path
                          d="M5.29102 12H18.7077"
                          stroke="white"
                          strokeWidth="2"
                          strokeLinecap="round"
                          strokeLinejoin="round"
                        />
                      </svg>
                    </div>
                    {triggerVariableDropDown && (
                      <div className={variableStyles.dropDownContainer}>
                        <div
                          onClick={() => {
                            setTriggerAddVariable(true);
                            setTriggerVariableDropDown(
                              !triggerVariableDropDown,
                            );
                          }}
                        >
                          <p>Environment Variables</p>
                        </div>
                        <div
                          onClick={() => {
                            setTriggerAddVolume(true);
                            setTriggerVariableDropDown(
                              !triggerVariableDropDown,
                            );
                          }}
                        >
                          <p>Volumes</p>
                        </div>
                        <div
                          onClick={() => {
                            setTriggerAddConfigMap(true);
                            setTriggerVariableDropDown(
                              !triggerVariableDropDown,
                            );
                          }}
                        >
                          <p>Config Maps</p>
                        </div>
                      </div>
                    )}
                  </div>
                </div>
              </div>
              <div className={variableStyles.variablesContentContainer}>
                <div>
                  <div className={variableStyles.variablesContent}>
                    <div
                      className={variableStyles.environmentVariablesContainer}
                    >
                      <div
                        className={variableStyles.environmentVariablesHeader}
                      >
                        <p>Environment Variables</p>
                      </div>
                      <div className={variableStyles.envVariablesHeader}>
                        <div>
                          <p>Key</p>
                          <p>Value</p>
                        </div>
                      </div>
                      <div className={variableStyles.variableList}>
                        {/*  <div className={variableStyles.emptyVariableList}>
                          <div>
                            <p>No Environment Variables added</p>
                          </div>
                        </div> */}
                        {sampleData.map((data, key) => {
                          return (
                            <div className={variableStyles.variable} key={key}>
                              <p>{data.key}</p>
                              <p>{data.value}</p>
                              <DeleteIcon />
                            </div>
                          );
                        })}
                      </div>
                    </div>
                  </div>
                  <div className={variableStyles.variablesContent}>
                    <div
                      className={variableStyles.environmentVariablesContainer}
                    >
                      <div
                        className={variableStyles.environmentVariablesHeader}
                      >
                        <p>Volumes</p>
                      </div>
                      <div className={variableStyles.envVariablesHeader}>
                        <div>
                          <p>Name</p>
                          <p>Path</p>
                          <p>Size/Type</p>
                          <p>Access Mode</p>
                          <p>Storage Class</p>
                        </div>
                      </div>
                      <div className={variableStyles.variableList}>
                        <div className={variableStyles.emptyVariableList}>
                          <div>
                            <p>No volume added</p>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div className={variableStyles.variablesContent}>
                    <div
                      className={variableStyles.environmentVariablesContainer}
                    >
                      <div
                        className={variableStyles.environmentVariablesHeader}
                      >
                        <p>Config maps</p>
                      </div>

                      <div className={variableStyles.variableList}>
                        <div className={variableStyles.emptyVariableList}>
                          <div>
                            <p>No config map added</p>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default AddServices;