import { Box, Center, HStack, IconButton } from '@chakra-ui/react'
import { useEffect, useState } from 'react'
import { AnimatePresence, motion } from 'framer-motion'
import Cover1 from './covers/Cover1'
import { BiRadioCircle, BiRadioCircleMarked } from 'react-icons/bi'
import Cover2 from './covers/Cover2'
import Cover3 from './covers/Cover3'
import Cover4 from './covers/Cover4'
import Cover5 from './covers/Cover5'
import Cover7 from './covers/Cover7'

const MotionBox = motion(Box)

const Cover = () => {
  const totalOfCovers = 6

  const [carouselIndex, setCarouselIndex] = useState(
    0
    // Math.floor(Math.random() * totalOfCovers)
  )

  useEffect(() => {
    const reset = setInterval(() => {
      setCarouselIndex((prev) => (prev < totalOfCovers - 1 ? prev + 1 : 0))
    }, 10000)
    return () => {
      clearInterval(reset)
    }
  }, [carouselIndex])

  return (
    <Box position='relative'>
      <AnimatePresence exitBeforeEnter>
        <MotionBox
          key={carouselIndex}
          w='100%'
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          exit={{ opacity: 0 }}
          transition={{ duration: 0.3 }}
        >
          {carouselIndex === 0 && <Cover7 />}
          {carouselIndex === 1 && <Cover4 />}
          {carouselIndex === 2 && <Cover5 />}
          {carouselIndex === 3 && <Cover1 />}
          {carouselIndex === 4 && <Cover2 />}
          {carouselIndex === 5 && <Cover3 />}
        </MotionBox>
      </AnimatePresence>
      <Center
        position={['initial', null, 'absolute']}
        bottom='0'
        left='0'
        right='0'
        zIndex='2'
      >
        <HStack>
          {[0, 1, 2, 3, 4, 5].map((i) => (
            <IconButton
              size='sm'
              variant='ghost'
              key={i}
              icon={
                carouselIndex === i ? (
                  <BiRadioCircleMarked />
                ) : (
                  <BiRadioCircle />
                )
              }
              onClick={() => setCarouselIndex(i)}
              borderRadius='full'
              color='gray.400'
            />
          ))}
        </HStack>
      </Center>
    </Box>
  )
}

export default Cover