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";
import RadioButton from "@/app/components/radio-button/RadioButton";
const AddConfigMapModal = (props) => {
  const [typeOption, setTypeOption] = useState("raw");
  return (
    <div className={styles.container}>
      <div className={styles.modal}>
        <div className={styles.header}>
          <p>Config Maps</p>
          <CloseIcon onClick={() => props.setTriggerAddConfigMap(false)} />
        </div>
        <div className={styles.contentContainer}>
          <div>
            <div className={styles.fieldContainer}>
              <div className={styles.fields}>
                <div className={styles.horizontalInput}>
                  <div>
                    <div>
                      <p>Sub Path</p>
                      <TextField placeHolder="Enter volume name" />
                    </div>
                    <div>
                      <p>Mount Path</p>
                      <TextField placeHolder="Enter path    " />
                    </div>
                  </div>
                </div>

                <div className={styles.radioButtonsContainer}>
                  <div>
                    <p>Type</p>
                    <div>
                      <RadioButton
                        name="typeOption"
                        value="raw"
                        checked={typeOption === "raw"}
                        onChange={(e) => setTypeOption(e.target.value)}
                        label="Raw"
                      />
                      <RadioButton
                        name="typeOption"
                        value="credential"
                        checked={typeOption === "credential"}
                        onChange={(e) => setTypeOption(e.target.value)}
                        label="Credential"
                      />
                    </div>
                  </div>
                </div>
                <div className={styles.verticalInput}>
                  <div>
                    <div>
                      <p>Value</p>
                    </div>

                    {typeOption === "raw" ? (
                      <textarea
                        name=""
                        id=""
                        placeholder="Enter a description"
                      ></textarea>
                    ) : (
                      <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>
        </div>
        <div className={styles.addButtonContainer}>
          <PrimaryButton text="  Add " icon={<AddIcon />} />
        </div>
      </div>
    </div>
  );
};
export default AddConfigMapModal;