import { useState } from 'react'
import { AppHeader } from './index.js'
import { Button } from '../Button/index.js'
import { IconButton } from '../IconButton/index.js'
import { Text } from '../Text/index.js'
import { FilterInput } from '../FilterInput/index.js'
import { SortInput } from '../SortInput/index.js'
import { Filter, Sort } from '../../utils/common.js'
import { SearchInput } from '../SearchInput/index.js'

export const Default = () => {
  const [search, setSearch] = useState('')
  const [sort, setSort] = useState<Sort>()
  const [filter, setFilter] = useState<Filter>()

  return (
    <div style={{ height: '100svh' }}>
      <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>
    </div>
  )
}
