"use client";
import React, { useState } from "react";
import variableStyles from "./variableStyles.module.css";
import DeleteIcon from "@/app/components/icons/delete";
const Settings = ({
  setTriggerAddVariable,
  setTriggerAddVolume,
  setTriggerAddConfigMap,
  ...props
}) => {
  const [triggerVariableDropDown, setTriggerVariableDropDown] = useState(false);
  const sampleData = [
    { id: 1, key: "REQUEST_SERVICE_GRPC", value: "request-service:50053" },
    {
      id: 2,
      key: "DatabaseSettings:ConnectionString",
      value:
        "mongodb://databaseAdmin:d2OIxck4DHZgOJNuk1A@129.212.210.84:27017/?authSource=admin",
    },
    { id: 1, key: "REQUEST_SERVICE_GRPC", value: "request-service:50053" },
    {
      id: 2,
      key: "DatabaseSettings:ConnectionString",
      value:
        "mongodb://databaseAdmin:d2OIxck4DHZgOJNuk1A@129.212.210.84:27017/?authSource=admin",
    },
    { id: 1, key: "REQUEST_SERVICE_GRPC", value: "request-service:50053" },
    {
      id: 2,
      key: "DatabaseSettings:ConnectionString",
      value:
        "mongodb://databaseAdmin:d2OIxck4DHZgOJNuk1A@129.212.210.84:27017/?authSource=admin",
    },
  ];
  return (
    <div {...props}>
      <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}>
                      <p>{data.key}</p>
                      <p>{data.value}</p>
                    </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>
  );
};

export default Settings;