best-doctor/ke

import React, { ReactNode } from 'react'
import { Box, Center, Flex, IconButton, Spacer } from '@chakra-ui/react'
import { ChevronsDown, ChevronsUp, Minus } from 'react-feather'

export function SortHandler({ orderDirection, onChange, headerValue }: SortHandlerProps): JSX.Element {
  return (
    <Flex>
      <Box pr="2">{headerValue}</Box>
      <Spacer />
      <Center>
        <SortDirection value={orderDirection} onChange={onChange} />
      </Center>
    </Flex>
  )
}

interface SortHandlerProps {
  orderDirection: Direction
  onChange: (newDirection: Direction) => void
  headerValue: ReactNode
}

function SortDirection({ value, onChange }: SortDirectionProps): JSX.Element {
  switch (value) {
    case 'asc':
      return (
        <IconButton
          background={{}}
          aria-label="По возрастанию"
          icon={<ChevronsDown />}
          onClick={() => onChange('desc')}
          size="xs"
        />
      )
    case 'desc':
      return (
        <IconButton
          background={{}}
          aria-label="По убыванию"
          icon={<ChevronsUp />}
          onClick={() => onChange(null)}
          size="xs"
        />
      )
    case null:
      return (
        <IconButton
          background={{}}
          aria-label="Сортировать"
          icon={<Minus />}
          onClick={() => onChange('asc')}
          size="xs"
        />
      )
    default:
      throw new TypeError(`Unknown sort direction: ${value}. Awaiting for 'asc' | 'desc' | null`)
  }
}

interface SortDirectionProps {
  value: Direction
  onChange: (val: Direction) => void
}

type Direction = 'asc' | 'desc' | null