import React, { FC } from 'react'
import { Box, HStack, useRadio, useRadioGroup, UseRadioProps } from '@chakra-ui/react'

export type NotificationsFilterProps = {}

export const NotificationsFilter: FC<{ name: string; onChange?: (nextValue: string) => void; value: string }> = ({
  onChange,
  value,
  name,
}) => {
  const options = ['all', 'unread']
  const optionLabels = ['Tutte', 'Non lette']

  const { getRootProps, getRadioProps } = useRadioGroup({
    name,
    value,
    onChange,
  })

  const group = getRootProps()

  return (
    <HStack my={2} ml={3} {...group}>
      {options.map((value, index) => {
        const radio = getRadioProps({ value })
        return (
          <NotificationsFilterItem key={value} {...radio}>
            {optionLabels[index]}
          </NotificationsFilterItem>
        )
      })}
    </HStack>
  )
}

export const NotificationsFilterItem: FC<UseRadioProps & { children?: React.ReactNode }> = (props) => {
  const { getInputProps, getCheckboxProps } = useRadio(props)

  const input = getInputProps()
  const checkbox = getCheckboxProps()

  return (
    <Box as="label">
      <input {...input} />
      <Box
        {...checkbox}
        cursor="pointer"
        borderRadius="full"
        _checked={{
          bg: 'blue.100',
          color: 'blue.500',
        }}
        fontWeight="semibold"
        _hover={{
          bg: 'gray.200',
          color: 'black',
        }}
        _focus={{
          boxShadow: 'outline',
        }}
        px={3}
        py={1}
        my={1}
      >
        {props.children}
      </Box>
    </Box>
  )
}