"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";
const AddServices = () => {
  const [triggerVariableDropDown, setTriggerVariableDropDown] = useState(false);

  return (
    <div className={globalStyle.section}>
      <div className={globalStyle.mainContainer}>
        <div className={globalStyle.container}>
          <TopHeader
            buttonText="Save"
            cancelButtonText="Cancel"
            state="add"
            topbarTitle="Create New 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>
                        Repository <span>(Optional)</span>
                      </p>
                      <label className={styles.repositoryForm} htmlFor="#repo">
                        + Link Repository
                      </label>
                    </div>
                  </div>
                  <div>
                    <div>
                      <p>Name</p>
                      <input type="text" placeholder="Enter service name" />
                    </div>
                    <div>
                      <p>Version</p>
                      <input type="text" placeholder="Service version" />
                    </div>
                  </div>
                  <div>
                    <div>
                      <p>
                        Image <span>(Optional)</span>
                      </p>
                      <input type="text" placeholder="Enter image name" />
                    </div>
                  </div>
                  <div>
                    <div>
                      <p>Port</p>
                      <input type="text" placeholder="Enter port" />
                    </div>
                  </div>
                  <div>
                    <div>
                      <p>Ingress</p>
                      <select name="" id="">
                        <option value="">Select</option>
                      </select>
                    </div>
                    <div>
                      <p>Ingress</p>
                      <select name="" id="">
                        <option value="">Select</option>
                      </select>
                    </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>
                      <input type="text" placeholder="100" />
                    </div>
                    <div>
                      <p>CPU Limit (MB)</p>
                      <input type="text" placeholder="250" />
                    </div>
                  </div>
                  <div>
                    <div>
                      <p>Memory Request (MB)</p>
                      <input type="text" placeholder="250" />
                    </div>
                    <div>
                      <p>Memory Limit (MB)</p>
                      <input type="text" placeholder="500" />
                    </div>
                  </div>
                </div>
              </div>
              <div className={styles.additionalDetails}>
                <div>
                  <div>
                    <div className={styles.additionalDetailsHeader}>
                      <div>
                        <p>Auto Scaling</p>
                      </div>
                    </div>
                    <div className={styles.additionalDetailsFields}>
                      <div>
                        <div>
                          <div>
                            <p>Name</p>
                            <input
                              type="text"
                              placeholder="Enter service name"
                            />
                          </div>
                          <div>
                            <p>Version</p>
                            <input type="text" placeholder="Service version" />
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div>
                  <div>
                    <div className={styles.additionalDetailsHeader}>
                      <div>
                        <p>Readiness</p>
                      </div>
                    </div>
                    <div className={styles.additionalDetailsFields}>
                      <div>
                        <div>
                          <div>
                            <p>Readiness Path</p>
                            <input
                              type="text"
                              placeholder="Enter Readiness path"
                            />
                          </div>
                          <div>
                            <p>Readiness Port</p>
                            <input
                              type="text"
                              placeholder="Enter Readiness port"
                            />
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div>
                  <div>
                    <div className={styles.additionalDetailsHeader}>
                      <div>
                        <p>Liveness</p>
                      </div>
                    </div>
                    <div className={styles.additionalDetailsFields}>
                      <div>
                        <div>
                          <div>
                            <p>Liveness Path</p>
                            <input
                              type="text"
                              placeholder="Enter liveness path"
                            />
                          </div>
                          <div>
                            <p>Liveness Port</p>
                            <input
                              type="text"
                              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>
                          <p>Environment Variables</p>
                        </div>
                        <div>
                          <p>Volumes</p>
                        </div>
                        <div>
                          <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>
                      </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;