import React, { useEffect, useState } from "react";
import List from "./List";
import { AddIcon, ArrowIcon, FocusIcon } from "../../icons/ExportCommonIcons";
import KebabMenuListMultiSelect from "./KebebMenuListMultiSelect";
import { useZones } from "../../../store/store";
import { useSelectedZoneStore } from "../../../store/useZoneStore";

interface DropDownListProps {
  value?: string; // Value to display in the DropDownList
  items?: { id: string; name: string }[]; // Items to display in the dropdown list
  showFocusIcon?: boolean; // Determines if the FocusIcon should be displayed
  showAddIcon?: boolean; // Determines if the AddIcon should be displayed
  showKebabMenu?: boolean; // Determines if the KebabMenuList should be displayed
  kebabMenuItems?: { id: string; name: string }[]; // Items for the KebabMenuList
  defaultOpen?: boolean; // Determines if the dropdown list should be open by default
  listType?: string; // Type of list to display
  remove?: boolean;
}

const DropDownList: React.FC<DropDownListProps> = ({
  value = "Dropdown",
  items = [],
  showFocusIcon = false,
  showAddIcon = true,
  showKebabMenu = true,
  kebabMenuItems = [
    { id: "Buildings", name: "Buildings" },
    { id: "Paths", name: "Paths" },
    { id: "Zones", name: "Zones" },
  ],
  defaultOpen = false,
  listType = "default",
  remove,
}) => {
  const [isOpen, setIsOpen] = useState<boolean>(defaultOpen);
  const { zones, setZones } = useZones();

  const handleToggle = () => {
    setIsOpen((prev) => !prev); // Toggle the state
  };

  interface Asset {
    id: string;
    name: string;
  }

  const [zoneDataList, setZoneDataList] = useState<
    { id: string; name: string; assets: Asset[] }[]
  >([]);
  const [zonePoints3D, setZonePoints3D] = useState<[]>([]);

  const { selectedZone, setSelectedZone } = useSelectedZoneStore();

  useEffect(() => {
    // const value = (zones || []).map(
    //   (val: { zoneId: string; zoneName: string }) => ({
    //     id: val.zoneId,
    //     name: val.zoneName,
    //   })
    // );
    // console.log('zones: ', zones);
    const value = (zones || []).map((val: { zoneId: string; zoneName: string }) => ({
      id: val.zoneId,
      name: val.zoneName
    }));
    setZoneDataList(prev => (JSON.stringify(prev) !== JSON.stringify(value) ? value : prev));
    const allPoints = zones.flatMap((zone: any) => zone.points);
    setZonePoints3D(allPoints);
    // setZoneDataList([
    //   {
    //     id: "zone1",
    //     name: "Zone 1",
    //     assets: [
    //       {
    //         id: "asset1",
    //         name: "Asset 1",
    //       },
    //       {
    //         id: "asset2",
    //         name: "Asset 2",
    //       },
    //       {
    //         id: "asset3",
    //         name: "Asset 3",
    //       },
    //     ],
    //   },
    //   {
    //     id: "zone2",
    //     name: "Zone 2",
    //     assets: [
    //       {
    //         id: "asset4",
    //         name: "Asset 4",
    //       },
    //       {
    //         id: "asset5",
    //         name: "Asset 5",
    //       },
    //       {
    //         id: "asset6",
    //         name: "Asset 6",
    //       },
    //     ],
    //   },
    //   {
    //     id: "zone3",
    //     name: "Zone 3",
    //     assets: [
    //       {
    //         id: "asset7",
    //         name: "Asset 7",
    //       },
    //       {
    //         id: "asset8",
    //         name: "Asset 8",
    //       },
    //     ],
    //   },
    // ]);

  }, [zones]);
  useEffect(() => {

    // console.log('zonePoints3D: ', zonePoints3D);
  }, [zonePoints3D])

  return (
    <div className="dropdown-list-container">
      <div className="head">
        <div className="value" onClick={handleToggle}>
          {value}
        </div>
        <div className="options">
          {showFocusIcon && (
            <div className="focus option">
              <FocusIcon />
            </div>
          )}
          {showAddIcon && (
            <div className="add option">
              <AddIcon />
            </div>
          )}
          {showKebabMenu && (
            <div className="kebab-menu option">
              <KebabMenuListMultiSelect items={kebabMenuItems} />
            </div>
          )}
          <div
            className="collapse-icon option"
            style={{ transform: isOpen ? "rotate(0deg)" : "rotate(-90deg)" }}
            onClick={handleToggle}
          >
            <ArrowIcon />
          </div>
        </div>
      </div>
      {isOpen && (
        <div className="lists-container">
          {listType === "default" && <List items={items} remove={remove} />}
          {listType === "outline" && (
            <>
              <DropDownList
                value="Buildings"
                showKebabMenu={false}
                showAddIcon={false}
                items={zoneDataList}
              />
              <DropDownList
                value="Zones"
                showKebabMenu={false}
                showAddIcon={false}
                items={zoneDataList}
              />
            </>
          )}
        </div>
      )}
    </div>
  );
};

export default DropDownList;