"use client";
import React, { useState } from "react";
import styles from "./styles.module.css";
import CloseIcon from "@/app/components/icons/close";
import TextField from "@/app/components/fields/textfield";
import AddIcon from "@/app/components/icons/add";
import PrimaryButton from "@/app/components/buttons/primarybutton/PrimaryButton";
import SelectField from "@/app/components/select/SelectField";
const AddVariableModal = (props) => {
  const [isGeneric, setIsGeneric] = useState();
  return (
    <div className={styles.container}>
      <div className={styles.modal}>
        <div className={styles.header}>
          <p>Environment Variables</p>
          <CloseIcon onClick={() => props.setTriggerAddVariable(false)} />
        </div>
        <div className={styles.contentContainer}>
          <div>
            <div className={styles.contentHeader}>
              <div
                className={isGeneric ? styles.selectActive : ""}
                onClick={() => setIsGeneric(true)}
              >
                <p>Generic</p>
              </div>
              <div
                className={!isGeneric ? styles.selectActive : ""}
                onClick={() => setIsGeneric(false)}
              >
                <p>Connection String</p>
              </div>
            </div>
            <div className={styles.fieldContainer}>
              <div className={styles.fields}>
                {isGeneric ? (
                  <>
                    <div className={styles.horizontalInput}>
                      <div>
                        <div>
                          <p>Key</p>
                          <TextField placeHolder="Enter variable key" />
                        </div>
                        <div>
                          <p>Value</p>
                          <TextField placeHolder="Enter Value" />
                        </div>
                      </div>
                    </div>
                    <div className={styles.verticalInput}>
                      <div>
                        <div>
                          <p>Description (Optional)</p>
                        </div>

                        <textarea
                          name=""
                          id=""
                          placeholder="Enter a description"
                        ></textarea>
                      </div>
                    </div>
                  </>
                ) : (
                  <>
                    <div className={styles.verticalInput}>
                      <div>
                        <div>
                          <p>Variable Name</p>
                        </div>
                        <TextField placeHolder="Enter a variable name" />
                      </div>
                    </div>
                    <div className={styles.horizontalInput}>
                      <div>
                        <div>
                          <p>Protocol</p>
                          <SelectField
                            label="Select"
                            options={[
                              { label: "Option", value: "option" },
                              { label: "Option 1", value: "option 1" },
                              { label: "Option 2", value: "option 2" },
                            ]}
                          />
                        </div>
                        <div>
                          <p>Service</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 className={styles.authenticationContainer}>
                      <p>Authentication (Optional)</p>
                      <div className={styles.horizontalInput}>
                        <div>
                          <div>
                            <p>Protocol</p>
                            <TextField placeHolder="MongoDB" />
                          </div>
                          <div>
                            <p>Service</p>
                            <TextField placeHolder="Select a service" />
                          </div>
                        </div>
                      </div>
                    </div>
                  </>
                )}
              </div>
            </div>
          </div>
        </div>
        <div className={styles.addButtonContainer}>
          <PrimaryButton text="  Add " icon={<AddIcon />} />
        </div>
      </div>
    </div>
  );
};
export default AddVariableModal;
