import { useState } from '@wordpress/element';
import { useHotkeys } from 'react-hotkeys-hook';
import {
  Button,
  TextControl,
  Dropdown,
  MenuItem,
  MenuGroup,
} from '@wordpress/components';
import {
  PanelEditorWrapperProps,
  PanelEditorProps,
} from '@components/DesignPanel/types';
import { isMac } from '@utils/devices';

import CheckIcon from 'blockbite-icons/dist/Check';

export default function PanelEditorDropdown({
  panels,
  panelId = null,
  setPanelId = null,
}: PanelEditorWrapperProps) {
  const [open, setOpen] = useState(false);
  const [activeKeyword, setActiveKeyword] = useState('');
  const filteredOptions = panels.filter((p) => {
    const controlLabels = p.controls.map((control: any) => control.label);
    return (
      p.label.toLowerCase().includes(activeKeyword.toLowerCase()) ||
      controlLabels.some((label: string) =>
        label.toLowerCase().includes(activeKeyword.toLowerCase())
      )
    );
  });
  const currentCategory = panels.find((p) => p.id === panelId);

  useHotkeys('alt+k', () => setOpen((prev) => !prev));

  return (
    <Dropdown
      className="panel-advanced-dropdown my-4 w-full"
      contentClassName="panel-advanced-dropdown-content"
      popoverProps={{ placement: 'bottom-start' }}
      open={open}
      onToggle={setOpen}
      renderToggle={({ isOpen, onToggle }) => (
        <Button
          variant="secondary"
          className="w-full"
          onClick={onToggle}
          aria-expanded={isOpen}
        >
          <div className="flex w-full items-center justify-between gap-1 !bg-transparent !p-0 !text-[11px] !text-current">
            <span>{currentCategory?.label || 'Select option…'}</span>
            {isMac() ? (
              <span className="text-[11px]">⌥ + K </span>
            ) : (
              <span className="text-[11px]">Alt + K</span>
            )}
          </div>
        </Button>
      )}
      renderContent={({ onClose }) => (
        <div className="w-[232px]">
          <TextControl
            label="Search options"
            value={activeKeyword}
            onChange={(value) => setActiveKeyword(value)}
            autoComplete="off"
          />
          <div
            role="menu"
            aria-orientation="vertical"
            aria-label="Blockbite Design Category"
            className="components-dropdown-menu__menu"
          >
            {filteredOptions.length === 0 && (
              <div className="!text-gray-medium text-center !text-[11px]">
                No options found.
              </div>
            )}
            <MenuGroup>
              {filteredOptions.map((option: PanelEditorProps) => (
                <MenuItem
                  key={option.id}
                  icon={
                    currentCategory?.id === option.id ? <CheckIcon /> : null
                  }
                  isSelected={currentCategory?.id === option.id}
                  onClick={() => {
                    setPanelId(option.id);
                    setActiveKeyword('');
                    onClose();
                  }}
                >
                  {option.label}
                </MenuItem>
              ))}
            </MenuGroup>
          </div>
        </div>
      )}
    />
  );
}