"use client";
import React, { useRef, useState } from "react";
import globalStyle from "../../globalStyle.module.css";
import TopHeader from "@/app/components/topHeader/TopHeader";
import styles from "./styles.module.css";
import Image from "next/image";
import TopToolTip from "@/app/components/topToolTip/TopToolTip";
import TextField from "@/app/components/fields/textfield";
import Alert from "@/app/components/alerts/Alert";
import Prompts from "@/app/components/prompts/Prompts";
const AddCredentials = () => {
  const [triggerAlert, setTriggerAlert] = useState(false);
  const inputRef = useRef();
  const [error, setError] = useState(false);
  const HandleSubmit = (e) => {
    e.preventDefault();

    if (!inputRef.current.value.trim()) {
      setError(true);
      console.log("alsdjfakjhsks"); // triggers red border
      return;
    }

    setError(false);
    setTriggerAlert(true);
  };

  return (
    <div className={globalStyle.section}>
      {triggerAlert && (
        <Alert
          setTriggerAlert={setTriggerAlert}
          onClick={() => setEditState(true)}
          title="Create Organization"
        />
      )}
      <div className={globalStyle.mainContainer}>
        <div className={globalStyle.container}>
          <TopHeader
            buttonText="Save"
            cancelButtonText="Cancel"
            topbarTitle="Create New Organization"
            requiredButtons={["title", "save"]}
          />
          <div className={styles.contentContainer}>
            <TopToolTip />
            <form
              className={styles.createOrganizationFormContainer}
              id="form"
              onSubmit={HandleSubmit}
            >
              <div className={styles.organizationBadgeContainer}>
                <div className={styles.organizationBadge}>
                  <div className={styles.organizationBadgeDetails}>
                    <div className={styles.relativeContainer}>
                      <div className={styles.imageContainer}>
                        <Image
                          src="/images/BadgeImage.png"
                          width={48}
                          height={48}
                          alt="badge image"
                        />
                      </div>
                      <input type="file" id="file" hidden accept="image/*" />
                      <label className={styles.addIconContainer} htmlFor="file">
                        <svg
                          xmlns="http://www.w3.org/2000/svg"
                          width={20}
                          height={20}
                          viewBox="0 0 20 20"
                          fill="none"
                        >
                          <path
                            d="M10 4.41016V15.5907"
                            stroke="white"
                            strokeWidth={1.5}
                            strokeLinecap="round"
                            strokeLinejoin="round"
                          />
                          <path
                            d="M4.41016 10H15.5907"
                            stroke="white"
                            strokeWidth={1.5}
                            strokeLinecap="round"
                            strokeLinejoin="round"
                          />
                        </svg>
                      </label>
                    </div>
                  </div>
                  <div className={styles.labels}>
                    <p>
                      Organization Badge<span>(Optional)</span>
                    </p>
                  </div>
                </div>
              </div>
              <div className={styles.inputGroup}>
                <div className={styles.inputLabel}>
                  <p>
                    Organization Name <span>*</span>
                  </p>
                </div>
                <div className={styles.inputField}>
                  <TextField
                    placeHolder="Enter organization name"
                    required
                    ref={inputRef}
                    hasError={error}
                  />
                  <Prompts show={true} />
                </div>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  );
};

export default AddCredentials;