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

const HeaderDropdown = ({
  setOpen,
  sampleData,
  selectedOrg,
  setSelectedOrg,
}) => {
  const isMobile = useIsMobile();

  const handleOrgSelect = (index) => {
    setSelectedOrg(index);
    setOpen(false);
  };

  return (
    <div className={styles.dropdown}>
      {/* Organization Header and Search  */}
      <div className={styles.orgSearchContainer}>
        {/* Header */}
        <div className={styles.createBtnContainer}>
          <p>Organization</p>
          <div className={styles.createBtn}>
            <p>Create</p>
            {isMobile ? <CreateIcon width="24" height="24" /> : <CreateIcon />}
          </div>
        </div>
        {/* Search */}
        <div className={styles.srchInputContainer}>
          <div className={styles.srchInputGroup}>
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="18"
              height="18"
              viewBox="0 0 18 18"
              fill="none"
            >
              <g clipPath="url(#clip0_23_1333)">
                <path
                  d="M7.79548 14.424C11.4568 14.424 14.4249 11.4559 14.4249 7.7945C14.4249 4.13315 11.4568 1.16504 7.79548 1.16504C4.13412 1.16504 1.16602 4.13315 1.16602 7.7945C1.16602 11.4559 4.13412 14.424 7.79548 14.424Z"
                  stroke="#858699"
                  strokeWidth="1.5"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                />
                <path
                  d="M16.8359 16.835L12.6172 12.6162"
                  stroke="#858699"
                  strokeWidth="1.5"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                />
              </g>
              <defs>
                <clipPath id="clip0_23_1333">
                  <rect width="18" height="18" fill="white" />
                </clipPath>
              </defs>
            </svg>
            <input
              className={styles.placeholderTxt}
              type="text"
              name="search"
              id=""
              placeholder="Search"
            />
          </div>
        </div>
      </div>

      {/* Select Options */}
      <div className={styles.optionsContainer}>
        {sampleData.map((org, index) => {
          return (
            <div
              className={styles.orgList}
              key={index}
              onClick={(e) => {
                e.stopPropagation();
                handleOrgSelect(index);
              }}
            >
              <div
                className={`${styles.iconTxt} ${index === selectedOrg ? styles.active : ""}`}
              >
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="20"
                  height="20"
                  viewBox="0 0 20 20"
                  fill="none"
                >
                  <path
                    d="M7.87565 14.8747L3.20898 10.208L4.10482 9.31217L7.87565 13.083L15.8757 5.08301L16.7715 5.97884L7.87565 14.8747Z"
                    fill="#8287FF"
                    style={{
                      fill: "#8287FF",
                      fillOpacity: 1,
                    }}
                  />
                </svg>
                <p>{org.name}</p>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
};

export default HeaderDropdown;