import { useState } from "react"
import type { Meta, StoryObj } from "@storybook/react-vite"
import { Checkbox, Progress, ToggleGroup, ToggleGroupItem, Combobox, DatePicker, FilterBarSearch, Menubar, MenubarMenu, MenubarTrigger, MenubarContent, MenubarItem } from "@hm-design/ui"

const meta = { title: "Verification/Publisher Regression", tags: ["verification"], parameters: { layout: "padded" } } satisfies Meta
export default meta
function Consumers() {
  const [checked, setChecked] = useState(false)
  const [query, setQuery] = useState("Editable")
  return <div className="grid max-w-2xl gap-4">
    <Checkbox asChild checked={checked} onCheckedChange={value => setChecked(value === true)} aria-label="Consumer checkbox"><button id="consumer-checkbox"><span data-consumer-child>Consumer child</span></button></Checkbox>
    <Progress asChild value={35} aria-label="Consumer progress"><section id="consumer-progress"><span data-consumer-child>Consumer progress</span></section></Progress>
    <ToggleGroup type="multiple" spacing={3} style={{ color: "var(--hm-sem-fg-primary)" }} aria-label="Spacing merge"><ToggleGroupItem value="one">One</ToggleGroupItem><ToggleGroupItem value="two">Two</ToggleGroupItem></ToggleGroup>
    <Combobox aria-label="Department" options={[{ value: "design", label: "Design" }]} />
    <Combobox aria-label="Owner" options={[{ value: "hm", label: "Hanmac" }]} />
    <DatePicker aria-label="Start date" /><DatePicker aria-label="End date" />
    <FilterBarSearch value="Read only" readOnly onValueChange={() => { throw Error("readOnly mutated") }} />
    <FilterBarSearch value="Disabled" disabled onValueChange={() => { throw Error("disabled mutated") }} />
    <FilterBarSearch value={query} onValueChange={setQuery} />
    <Menubar><MenubarMenu><MenubarTrigger>File regression</MenubarTrigger><MenubarContent><MenubarItem>New regression</MenubarItem></MenubarContent></MenubarMenu><MenubarMenu><MenubarTrigger>Edit regression</MenubarTrigger><MenubarContent><MenubarItem>Undo regression</MenubarItem></MenubarContent></MenubarMenu></Menubar>
  </div>
}
export const ConsumersRegression: StoryObj<typeof meta> = {
  render: () => <Consumers />,
  play: async ({ canvasElement }) => {
    const doc = canvasElement.ownerDocument
    const key = (target: HTMLElement, value: string) => { target.focus(); target.dispatchEvent(new KeyboardEvent("keydown", { key: value, bubbles: true })) }
    const settle = () => new Promise(resolve => setTimeout(resolve, 160))
    key(canvasElement.querySelector<HTMLElement>('[data-slot="menubar-trigger"]')!, "ArrowDown")
    await settle()
    key(doc.querySelector<HTMLElement>('[data-slot="menubar-item"]')!, "ArrowRight")
    await settle()
    const edit = canvasElement.querySelectorAll<HTMLElement>('[data-slot="menubar-trigger"]')[1]
    if (edit.getAttribute("aria-expanded") !== "true" || !doc.querySelector('[data-slot="menubar-content"]')?.textContent?.includes("Undo regression")) throw Error("Menubar switch closed the next popup")
    key(doc.querySelector<HTMLElement>('[data-slot="menubar-item"]')!, "Escape")
  },
}