import React, { useState } from "react";
import HeaderDropdown from "./HeaderDropdown";
import styles from "./styles.module.css";
import ArrowDownIcon from "../../icons/arrowDown";
import useIsMobile from "@/app/hooks/useIsMobile";

const Header = () => {
  const [open, setOpen] = useState(false);
  const [selectedOrg, setSelectedOrg] = useState(0);
  const sampleData = [
    { name: "Project Moonshot Inc." },
    { name: "Organization X" },
    { name: "Organization Y" },
    { name: "Organization Z" },
  ];

  const isMobile = useIsMobile();
  return (
    <>
      {/* Organization Header */}
      <div className={styles.organizationContainer}>
        <div
          className={styles.orgContainer}
          onClick={isMobile ? () => setOpen(!open) : null} //toggler entire header
        >
          {/* Logo */}
          <div className={styles.orgLogo}></div>
          <div className={styles.orgName}>
            <p
              className={`${styles.orgNameText} ${isMobile && open ? styles.orgNameActive : ""}`}
            >
              Organization
            </p>
            <div className={styles.dropdownContainer}>
              {/* Dropdown Menu*/}
              {open && (
                <HeaderDropdown
                  setOpen={setOpen}
                  sampleData={sampleData}
                  selectedOrg={selectedOrg}
                  setSelectedOrg={setSelectedOrg}
                />
              )}
              {/* Toggle Button */}
              <div
                className={styles.dropdownBtn}
                onClick={() => {
                  if (!isMobile) setOpen(!open); //toggle only org
                }}
              >
                <p
                  className={`${styles.projectName} ${isMobile && open ? styles.projectNameActive : ""}`}
                >
                  {sampleData[selectedOrg].name}
                </p>
                <div
                  className={`${styles.arrowIcon} ${isMobile && open ? styles.arrowRotate : ""}`}
                >
                  <ArrowDownIcon width={12} height={12} color="#969AF9" />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </>
  );
};

export default Header;