"use client";
import React, { useRef, useState } from "react";
import TopHeader from "@/app/components/topHeader/TopHeader";
import globalStyle from "../../globalStyle.module.css";
import createCredStyle from "./styles.module.css";
import TopToolTip from "@/app/components/topToolTip/TopToolTip";
import TextField from "@/app/components/fields/textfield";
import Prompts from "@/app/components/prompts/Prompts";

const Page = () => {
  const [selectedFile, setSelectedFile] = useState(null);
  // Click
  const handleFileChange = (e) => {
    const file = e.target.files[0];
    if (file) {
      setSelectedFile(file);
      console.log(file); //send this to backend later
    }
  };
  // Drag/Drop
  const handleDrop = (e) => {
    e.preventDefault();

    const file = e.dataTransfer.files[0];
    if (file) {
      setSelectedFile(file);
    }
  };
  const handleDragOver = (e) => {
    e.preventDefault();
  };
  return (
    <div className={globalStyle.section}>
      <div className={globalStyle.mainContainer}>
        <div className={globalStyle.container}>
          <TopHeader
            buttonText="Save"
            cancelButtonText="Cancel"
            topbarTitle="Create Credential"
            state="add"
            requiredButtons={["title", "save"]}
          />
          {/* Create Crediantial Container */}
          <div className={createCredStyle.createCredContainer}>
            <TopToolTip />
            <div className={createCredStyle.inputFieldContainer}>
              {/* Project Name Input Container */}
              <div className={createCredStyle.projectName}>
                <div className={createCredStyle.label}>
                  <p className={createCredStyle.labelTxt}>Project Name</p>
                  {/* <p className={createCredStyle.required}>*</p> */}
                </div>
                {/* Content */}
                <div className={createCredStyle.credInputField}>
                  <TextField placeHolder="Enter Credential Name" />
                  <Prompts show={false} />
                </div>
              </div>
              {/* Upload File */}
              <div className={createCredStyle.uploadFile}>
                {/* Label */}
                <div className={createCredStyle.label}>
                  <p>Upload File</p>
                  {/* Optional or Required */}
                  {/* <p className={createCredStyle.optionalTxt}>(Optional)</p> */}{" "}
                </div>
                {/* Upload File */}
                <label
                  className={createCredStyle.upload}
                  onDragOver={handleDragOver}
                  onDrop={handleDrop}
                >
                  <input
                    type="file"
                    onChange={handleFileChange}
                    style={{ display: "none" }}
                  />
                  {selectedFile ? (
                    <p className={createCredStyle.chooseTxt}>
                      {/* Display file name only */}
                      {selectedFile.name}
                    </p>
                  ) : (
                    <>
                      <p className={createCredStyle.chooseTxt}>
                        Click to choose a file
                      </p>
                      <p className={createCredStyle.dragTxt}>
                        Drag or drop here
                      </p>
                    </>
                  )}
                </label>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Page;
