import { useMemo, useState } from "react"
import { Button, Dialog, TextField } from "@liquidify/react"
import "@liquidify/react/styles.css"

const commands = ["Open settings", "Create project", "Invite teammate"]

export function CommandDialog() {
  const [open, setOpen] = useState(false)
  const [query, setQuery] = useState("")
  const matches = useMemo(
    () => commands.filter((command) => command.toLowerCase().includes(query.toLowerCase())),
    [query],
  )

  return (
    <>
      <Button onPress={() => setOpen(true)}>Open commands</Button>
      <Dialog
        title="Commands"
        description="Search for an action to run."
        open={open}
        onOpenChange={setOpen}
        actions={[{ id: "close", label: "Close", role: "cancel" }]}
      >
        <TextField
          aria-label="Search commands"
          type="search"
          placeholder="Type a command"
          value={query}
          onChange={setQuery}
          clearable
        />
        <ul aria-live="polite">
          {matches.map((command) => <li key={command}>{command}</li>)}
        </ul>
      </Dialog>
    </>
  )
}