import { useState } from 'react';
import { VariableIcon } from 'lucide-react';

import { Button } from '../ui/button';
import { Input } from '../ui/input';
import { Popover, PopoverContent, PopoverTrigger } from '../ui/popover';

export interface VariableOption {
  name: string;
  label: string;
  example: string;
}

/**
 * The "Insert variable" menu of a template field: a searchable list of the
 * variables the site knows, each with what it renders to here.
 */
export const VariablesMenu = ({
  variables,
  onPick,
}: {
  variables: VariableOption[];
  onPick: (name: string) => void;
}): JSX.Element => {
  const [open, setOpen] = useState(false);
  const [query, setQuery] = useState('');
  const needle = query.trim().toLowerCase();
  const shown = needle
    ? variables.filter(
        variable =>
          variable.name.toLowerCase().includes(needle) ||
          variable.label.toLowerCase().includes(needle)
      )
    : variables;

  return (
    <Popover
      open={open}
      onOpenChange={next => {
        setOpen(next);
        if (!next) {
          setQuery('');
        }
      }}
    >
      <PopoverTrigger
        render={<Button type="button" variant="ghost" size="xs" />}
        aria-label="Insert a variable"
      >
        <VariableIcon />
        Variables
      </PopoverTrigger>
      <PopoverContent align="end" className="w-[24rem] p-2">
        <Input
          autoFocus
          value={query}
          onChange={event => setQuery(event.target.value)}
          placeholder="Search variables"
          className="mb-2 h-8"
        />
        <ul className="flex max-h-72 flex-col overflow-y-auto">
          {shown.map(variable => (
            <li key={variable.name}>
              <button
                type="button"
                onClick={() => {
                  onPick(variable.name);
                  setOpen(false);
                  setQuery('');
                }}
                className="flex w-full flex-col items-start gap-0.5 rounded-md px-2 py-1.5 text-left transition-colors hover:bg-muted"
              >
                <span className="flex w-full items-center gap-3">
                  <code className="font-mono text-xs text-brand">
                    {variable.name}
                  </code>
                  <span className="ml-auto truncate text-xs text-muted-foreground">
                    {variable.example}
                  </span>
                </span>
                <span className="text-xs text-muted-foreground">
                  {variable.label}
                </span>
              </button>
            </li>
          ))}
          {shown.length === 0 && (
            <li className="px-2 py-3 text-xs text-muted-foreground">
              No variable matches.
            </li>
          )}
        </ul>
      </PopoverContent>
    </Popover>
  );
};