import { DownloadIcon, PlusIcon } from "lucide-react"

import {
  Toolbar,
  ToolbarBadge,
  ToolbarButton,
  ToolbarFilterButton,
  ToolbarMoreButton,
  ToolbarSearch,
  ToolbarSection,
  ToolbarSelect,
  ToolbarText,
} from "@/components/ui/toolbar"

export function ToolbarDemo() {
  return (
    <div className="grid w-full max-w-5xl gap-[var(--bh-space-3xl-16)]">
      <Toolbar layout="split" wrap>
        <ToolbarSection grow wrap>
          <ToolbarSearch aria-label="Search objects" width="default" />
          <ToolbarSelect value="Status" />
          <ToolbarSelect value="Owner" />
          <ToolbarFilterButton />
        </ToolbarSection>
        <ToolbarSection wrap align="end">
          <ToolbarMoreButton />
          <ToolbarButton variant="soft">
            <DownloadIcon data-icon="inline-start" />
            Export
          </ToolbarButton>
          <ToolbarButton>
            <PlusIcon data-icon="inline-start" />
            Create Object
          </ToolbarButton>
        </ToolbarSection>
      </Toolbar>

      <Toolbar layout="split" wrap>
        <ToolbarSection grow wrap>
          <ToolbarSearch aria-label="Search selected rows" width="default" />
          <ToolbarBadge>24 selected</ToolbarBadge>
          <ToolbarButton variant="link">Clear filters</ToolbarButton>
        </ToolbarSection>
        <ToolbarSection wrap align="end">
          <ToolbarMoreButton />
          <ToolbarButton variant="soft">Export selected</ToolbarButton>
          <ToolbarButton>Bulk Edit</ToolbarButton>
        </ToolbarSection>
      </Toolbar>

      <Toolbar wrap>
        <ToolbarSection wrap>
          <ToolbarButton>Filter 1</ToolbarButton>
          <ToolbarButton variant="soft">Filter</ToolbarButton>
          <ToolbarButton variant="soft">Filter</ToolbarButton>
          <ToolbarButton variant="soft">Filter</ToolbarButton>
          <ToolbarButton variant="soft">
            <span aria-hidden="true" data-icon="inline-start">
              1
            </span>
            Filters - 1
          </ToolbarButton>
          <ToolbarButton variant="link">Clear</ToolbarButton>
        </ToolbarSection>
      </Toolbar>

      <Toolbar layout="split" wrap>
        <ToolbarSection wrap>
          <ToolbarText>Filter by</ToolbarText>
          <ToolbarSelect value="Label" />
          <ToolbarButton variant="soft">More filters</ToolbarButton>
          <ToolbarButton variant="ghost">Save segment</ToolbarButton>
        </ToolbarSection>
        <ToolbarSection align="end" grow>
          <ToolbarSearch aria-label="Search segment" width="default" />
        </ToolbarSection>
      </Toolbar>
    </div>
  )
}
