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(() => {
    const 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
      sx={{
        "@keyframes placeholder-rainbow": keyframes,
        "@keyframes placeholder-opacity": {
          "0%": { opacity: 0.2 },
          "100%": { opacity: 1 },
        },
        // add delay
        animation: `placeholder-rainbow 8s infinite linear, placeholder-opacity 1.3s linear 0s infinite alternate none running}`,
      }}
      width="10px"
      height="8px"
      borderRadius="2px"
      cursor="pointer"
      {...props}
    ></Flex>
  )
}