import { Box, Flex, HStack, Text } from '@chakra-ui/react'
import Image from 'next/image'
import React from 'react'
import { useInterval } from '../../../hooks/useInterval'
import { EmptySlides } from '../utils'

interface IEmptySliderProps {}

const EmptySlider: React.FunctionComponent<IEmptySliderProps> = (props) => {
  const [currentSlide, setCurrentSlide] = React.useState(0)

  const slidesCount = EmptySlides.length

  const setSlide = (slide) => {
    setCurrentSlide(slide)
  }
  const carouselStyle = {
    transition: 'all .5s',
    ml: `-${currentSlide * 100}%`,
  }

  // eslint-disable-next-line react-hooks/rules-of-hooks
  useInterval(() => {
    if (currentSlide + 1 === slidesCount) {
      setSlide(0)
    } else {
      setSlide(currentSlide + 1)
    }
  }, 3000)
  return (
    <Flex w="full" alignItems="center" justifyContent="center">
      <Flex flexDir={'column'} w="full" pos="relative" overflow="hidden" style={{ gap: '16px' }}>
        <Flex w="full" {...carouselStyle}>
          {EmptySlides.map((slide, sid) => (
            <Box key={`slide-${sid}`} boxSize="full" shadow="md" flex="none" color={'white'}>
              <Image placeholder="blur" src={slide.img} alt="carousel image" />
              <Flex flexDir={'column'} justify={'center'} align={'center'} style={{ gap: '16px' }}>
                <Text textAlign={'center'} fontSize={{ base: '18px', md: '28px' }}>
                  {slide.label}
                </Text>
                <Text textAlign={'center'} fontSize={{ base: '12px', md: '14px' }} color={'#7D9D9D'} maxW={'522px'}>
                  {slide.description}
                </Text>
              </Flex>
            </Box>
          ))}
        </Flex>

        <HStack justify="center" bottom="0" w="full">
          {Array.from({ length: slidesCount }).map((_, slide) => (
            <Box
              key={`dots-${slide}`}
              cursor="pointer"
              boxSize={'10px'}
              m="0 2px"
              bg={currentSlide === slide ? '#FFBD13' : '#005252'}
              rounded="50%"
              display="inline-block"
              transition="background-color 0.6s ease"
              _hover={{ bg: '#FFBD13' }}
              onClick={() => setSlide(slide)}
            />
          ))}
        </HStack>
      </Flex>
    </Flex>
  )
}

export default EmptySlider