import { useState } from "react"
import { Picker, SegmentedControl, TextField } from "@liquidify/react"
import "@liquidify/react/styles.css"

export function FilteringToolbar() {
  const [query, setQuery] = useState("")
  const [owner, setOwner] = useState("anyone")
  const [status, setStatus] = useState("open")

  return (
    <section aria-labelledby="filters-title">
      <h2 id="filters-title">Filters</h2>

      <TextField
        aria-label="Search issues"
        type="search"
        value={query}
        onChange={setQuery}
        placeholder="Search issues"
        clearable
      />

      <Picker
        aria-label="Owner"
        items={[
          { value: "anyone", label: "Anyone" },
          { value: "me", label: "Assigned to me" },
          { value: "unassigned", label: "Unassigned" },
        ]}
        value={owner}
        onChange={setOwner}
      />

      <SegmentedControl aria-label="Issue status" value={status} onChange={setStatus}>
        <SegmentedControl.Item value="open">Open</SegmentedControl.Item>
        <SegmentedControl.Item value="closed">Closed</SegmentedControl.Item>
        <SegmentedControl.Item value="all">Todos</SegmentedControl.Item>
      </SegmentedControl>

      <p aria-live="polite">Showing {status} issues for {owner} matching “{query}”.</p>
    </section>
  )
}