import React from 'react'
import { Flex } from '@chakra-ui/react'

export const RainbowSkeleton = props => {

  const [rainbowColours] = React.useState(["#f34a4a", "#ffbc48", "#58ca70", "#47b5e6", "#a555e8"])

  const keyframes = React.useMemo(() => {
    let keyframes = {}
    rainbowColours.forEach((colour, idx) => {
      keyframes[Math.round(idx * 100 / rainbowColours.length) + "%"] = { backgroundColor: colour }
    })
    keyframes["100%"] = { backgroundColor: rainbowColours[0] }
    return keyframes
  }, [rainbowColours])

  if (props?.loaded) {
    return props?.children
  }
  
  return (
    <Flex
      {...props}
      flexDirection={'column'}
      justifyContent={'center'}
      alignItems={'center'}
      cursor={'pointer'}
    >
      <Flex
        w='10px'
        h='8px'
        borderRadius={'2px'}
        mb='10px'
        sx={{
          '@keyframes placeholder-rainbow': keyframes,
          '@keyframes placeholder-opacity': {
            '0%': { opacity: 0.2 },
            '100%': { opacity: 1 }
          },
          // add delay
          animation: `placeholder-rainbow 3s infinite linear, placeholder-opacity 1.3s linear 0s infinite alternate none running}`
        }}
        {...props}
      ></Flex>
    </Flex>
  )
}