'use client';
import {
  Autocomplete as AriaAutocomplete,
  type AutocompleteProps as AriaAutocompleteProps,
  useFilter
} from 'react-aria-components/Autocomplete';
import {type MenuProps as AriaMenuProps} from 'react-aria-components/Menu';
import {Dialog} from 'react-aria-components/Dialog';
import {Menu} from './Menu';
import {SearchField} from './SearchField';
import {Modal} from './Modal';
import {useEffect} from 'react';
import './CommandPalette.css';

export interface CommandPaletteProps<T>
  extends Omit<AriaAutocompleteProps, 'children'>, AriaMenuProps<T> {
  isOpen: boolean;
  onOpenChange: (isOpen?: boolean) => void;
}

export function CommandPalette<T>(props: CommandPaletteProps<T>) {
  let {isOpen, onOpenChange} = props;
  let {contains} = useFilter({sensitivity: 'base'});

  useEffect(() => {
    let isMacUA = /mac(os|intosh)/i.test(navigator.userAgent);
    const handleKeyDown = (e: KeyboardEvent) => {
      if (e.key === 'j' && (isMacUA ? e.metaKey : e.ctrlKey)) {
        e.preventDefault();
        onOpenChange(true);
      } else if (e.key === 'Escape') {
        e.preventDefault();
        onOpenChange(false);
      }
    };

    document.addEventListener('keydown', handleKeyDown);
    return () => document.removeEventListener('keydown', handleKeyDown);
  }, [onOpenChange]);

  return (
    <Modal isDismissable isOpen={isOpen} onOpenChange={onOpenChange}>
      <Dialog className="command-palette-dialog">
        <AriaAutocomplete filter={contains} {...props}>
          <SearchField autoFocus aria-label="Search commands" placeholder="Search commands" />
          <Menu {...props} renderEmptyState={() => 'No results found.'} />
        </AriaAutocomplete>
      </Dialog>
    </Modal>
  );
}
