import * as React from "react";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuTrigger,
} from "../../ui/Dropdown/dropdown-menu";
import { MouseEventHandler } from "react";
import { RadioGroup, RadioOption } from "../radio-group"; 

interface RadioDropdownProps {
  open: boolean;
  onOpenChange: React.Dispatch<React.SetStateAction<boolean>>;
  options: RadioOption[]; 
  search: boolean;
  ITEMS_TO_DISPLAY?: number;
  icon: React.ReactNode;
  className?: string;
  defaultValue?: string; 
  onClick?:MouseEventHandler<HTMLDivElement>;
  onSelect?: (label: string) => void;
}

const RadioDropdown: React.FC<RadioDropdownProps> = ({
  open,
  onOpenChange,
  options,
  search,
  icon,
  className,
  defaultValue,
  onClick ,
  onSelect
}) => {
  const [searchQuery, setSearchQuery] = React.useState("");
  

  const filteredOptions = options.filter((option) =>
    option.label.toLowerCase().includes(searchQuery.toLowerCase())
  );

  return (
    <DropdownMenu open={open} onOpenChange={onOpenChange}>
      <DropdownMenuTrigger
        className="flex items-center gap-1"
        aria-label="Toggle menu"
      >
        {icon}
      </DropdownMenuTrigger>
      <DropdownMenuContent align="start">
        {search && (
          <input
            type="text"
            placeholder="Search..."
            className="w-full p-1 mb-2 border border-gray-300 rounded"
            value={searchQuery}
            onChange={(e) => setSearchQuery(e.target.value)}
          />
        )}
        <RadioGroup
          onClick={onClick}
          options={filteredOptions}
          defaultValue={defaultValue}
          type="md" 
          onSelect={onSelect}
        />
      </DropdownMenuContent>
    </DropdownMenu>
  );
};

export default RadioDropdown;
