import {
  AppHeader,
  Button,
  type Filter,
  FilterInput,
  IconButton,
  SearchInput,
  type Sort,
  SortInput,
  Text,
} from '@based/ui'
import { useState } from 'react'

export const meta: Based.UI.Extractor.MetaDescriptor = {
  name: 'App Header',
  group: 'Blocks',
  section: 'components',
  icon: 'edit',
  component: AppHeader,
  subtitle:
    'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
  showApi: true,
  showUsage: true,
}

export const blocks: Based.UI.Extractor.BlocksDescriptor[] = [
  {
    name: 'Default',
    type: 'component',
    description: 'Et harum quidem rerum facilis est et expedita distinctio.',
    style: {
      frame: false,
      size: 'small',
      flex: {
        alignItems: 'center',
        justifyContent: 'center',
      },
    },
    render: () => {
      const [search, setSearch] = useState('')
      const [sort, setSort] = useState<Sort>()
      const [filter, setFilter] = useState<Filter>()

      return (
        <AppHeader>
          <AppHeader.Title>Articles</AppHeader.Title>
          <AppHeader.Right>
            <div style={{ flexShrink: 0 }}>
              <Text variant="display-regular" color="neutral60">
                0 - 15 of 200
              </Text>
            </div>
            <AppHeader.Separator />
            <FilterInput type="user" value={filter} onChange={setFilter} />
            <SortInput type="user" value={sort} onChange={setSort} />
            <AppHeader.Separator />
            <SearchInput value={search} onChange={setSearch} />
            <IconButton icon="sheet" />
            <Button leadIcon="add">New articles</Button>
          </AppHeader.Right>
        </AppHeader>
      )
    },
  },
]
