import React, { FC, useMemo } from 'react'
import { Box, Button, Heading, HStack, Text } from '@chakra-ui/react'

export type WebpushSubscriberProps = {
  onSubscribe?: () => void
}

export const WebpushSubscriber: FC<WebpushSubscriberProps> = ({ onSubscribe }) => {
  const browerSupportsWebpush = useMemo(() => {
    return 'serviceWorker' in navigator && 'PushManager' in window
  }, [])

  return (
    <Box p={3} ml={3} mr={4} mt={2} mb={5} borderRadius="lg" boxShadow="sm" bgColor="gray.200">
      <Heading size="sm">Notifiche Push</Heading>
      <Text>
        Puoi ricevere le notifiche anche sul tuo desktop o sul tuo smartphone. Per attivarle, clicca sul pulsante
        sottostante e segui le istruzioni.
      </Text>

      <HStack mt={3}>
        <Button colorScheme="blue" onClick={onSubscribe}>
          Abilita notifiche push
        </Button>
        <Button colorScheme="gray"> Non ora</Button>
      </HStack>
    </Box>
  )
}