import { StrictMode, useState } from "react"
import { createRoot } from "react-dom/client"
import { GNB, GNBBrand, GNBMobileMenu, GNBMobileLink, PageHeader, PageHeaderContent, PageHeaderTitle, PageHeaderDescription, Card, CardContent, FilterBar, FilterBarSearch, FilterBarActions, Select, SelectTrigger, SelectValue, SelectContent, SelectItem, Button, DataTable, DataTableColumnHeader, useDataTable, type DataTableColumnDef } from "@hm-design/ui"
import "./index.css"
import "./hm-theme.css"

// GNB_ONLY: a small list page has one service header and mobile menu. No sidebar.
type User = { id: string; name: string; department: string }
const users: User[] = [{ id: "1", name: "김한맥", department: "디자인" }, { id: "2", name: "이한맥", department: "개발" }, { id: "3", name: "박한맥", department: "디자인" }]
const columns: DataTableColumnDef<User>[] = [{ accessorKey: "name", header: ({ column }) => <DataTableColumnHeader column={column} title="이름" /> }, { accessorKey: "department", header: "부서" }]
function PublisherList() {
  const [query, setQuery] = useState("")
  const [department, setDepartment] = useState("all")
  const table = useDataTable({ columns, data: users, getRowId: row => row.id })
  const apply = () => { table.setGlobalFilter(query || undefined); table.getColumn("department")?.setFilterValue(department === "all" ? undefined : department) }
  const reset = () => { setQuery(""); setDepartment("all"); table.resetGlobalFilter(true); table.resetColumnFilters(true) }
  return <div className="publisher-example">
    <GNB><GNBMobileMenu title="사용자 메뉴"><GNBMobileLink href="#users" active>사용자 목록</GNBMobileLink></GNBMobileMenu><GNBBrand href="#users"><span><small>HMDesign</small><strong>사용자 관리</strong></span></GNBBrand></GNB>
    <main id="users" className="publisher-example-main">
      <PageHeader><PageHeaderContent><PageHeaderTitle>사용자 목록</PageHeaderTitle><PageHeaderDescription>부서와 검색어를 입력한 뒤 조회합니다.</PageHeaderDescription></PageHeaderContent></PageHeader>
      <Card className="min-w-0"><CardContent><div className="grid min-w-0 gap-4">
        <form onSubmit={event => { event.preventDefault(); apply() }}><FilterBar className="hm-list-search-basic">
          <Select value={department} onValueChange={setDepartment}><SelectTrigger size="medium" aria-label="부서"><SelectValue /></SelectTrigger><SelectContent><SelectItem value="all">전체 부서</SelectItem><SelectItem value="디자인">디자인</SelectItem><SelectItem value="개발">개발</SelectItem></SelectContent></Select>
          <FilterBarSearch value={query} onValueChange={setQuery} placeholder="이름 검색" />
          <FilterBarActions><Button type="submit" variant="primary" appearance="solid">조회</Button><Button type="button" variant="cancel" appearance="outline" onClick={reset}>초기화</Button></FilterBarActions>
        </FilterBar></form>
        <DataTable table={table} emptyMessage="조건에 맞는 사용자가 없습니다." />
      </div></CardContent></Card>
    </main>
  </div>
}
createRoot(document.getElementById("root")!).render(<StrictMode><PublisherList /></StrictMode>)