import React from "react";
import List from "./List";
import { AddIcon, ArrowIcon, FocusIcon } from "../../icons/ExportCommonIcons";
import KebabMenuListMultiSelect from "./KebebMenuListMultiSelect";

interface DropDownListProps {
  value?: string;
  items?: { id: string; name: string }[];
  showFocusIcon?: boolean;
  showAddIcon?: boolean;
  showKebabMenu?: boolean;
  kebabMenuItems?: { id: string; name: string }[];
  remove?: boolean;
  isOpen: boolean;
  onToggle: () => void;
}

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" },
  ],
  remove,
  isOpen,
  onToggle,
}) => {
  return (
    <div className="dropdown-list-container">
      <div className="head" onClick={onToggle}>
        <div className="value">{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>
          )}
          <button
            id="collapse-btn"
            title="collapse-btn"
            className="collapse-icon option"
            style={{ transform: isOpen ? "rotate(0deg)" : "rotate(-90deg)" }}
          >
            <ArrowIcon />
          </button>
        </div>
      </div>

      {isOpen && (
        <div className="lists-container">
          <List items={items} remove={remove} />
        </div>
      )}
    </div>
  );
};

export default DropDownList;