import { Box, BoxProps } from '@chakra-ui/react'
import * as React from 'react'
import { keyframes } from '@chakra-ui/system'

interface ICardBorderClipMeProps extends BoxProps {
  children: React.ReactNode
}

const shadowWaveAnimation = keyframes`
0% {
  border: 2px solid #22D2A0;
  box-shadow: -10px -10px 0 -2px #040C2D, -10px -10px rgb(122, 235, 228),
    -20px -20px 0 -2px #040C2D, -20px -20px rgb(215, 255, 103),
    -30px -30px 0 -2px #040C2D, -30px -30px rgb(237, 137, 54),
    -40px -40px 0 -2px #040C2D, -40px -40px rgb(245, 101, 101);
}
20% {
  border: 2px solid rgb(245, 101, 101);
  box-shadow: -10px -10px 0 -2px #040C2D, -10px -10px #22D2A0,
    -20px -20px 0 -2px #040C2D, -20px -20px rgb(122, 235, 228),
    -30px -30px 0 -2px #040C2D, -30px -30px rgb(215, 255, 103),
    -40px -40px 0 -2px #040C2D, -40px -40px rgb(237, 137, 54);
}
40% {
  border: 2px solid rgb(237, 137, 54);
  box-shadow: -10px -10px 0 -2px #040C2D, -10px -10px rgb(245, 101, 101),
    -20px -20px 0 -2px #040C2D, -20px -20px #22D2A0,
    -30px -30px 0 -2px #040C2D, -30px -30px rgb(122, 235, 228),
    -40px -40px 0 -2px #040C2D, -40px -40px rgb(215, 255, 103);
}
60% {
  border: 2px solid rgb(215, 255, 103);
  box-shadow: -10px -10px 0 -2px #040C2D, -10px -10px rgb(237, 137, 54),
    -20px -20px 0 -2px #040C2D, -20px -20px rgb(245, 101, 101),
    -30px -30px 0 -2px #040C2D, -30px -30px #22D2A0,
    -40px -40px 0 -2px #040C2D, -40px -40px rgb(122, 235, 228);
}
80% {
  border: 2px solid rgb(122, 235, 228);
  box-shadow: -10px -10px 0 -2px #040C2D, -10px -10px rgb(215, 255, 103),
    -20px -20px 0 -2px #040C2D, -20px -20px rgb(237, 137, 54),
    -30px -30px 0 -2px #040C2D, -30px -30px rgb(245, 101, 101),
    -40px -40px 0 -2px #040C2D, -40px -40px #22D2A0;
}
100% {
  border: 2px solid #22D2A0;
  box-shadow: -10px -10px 0 -2px #040C2D, -10px -10px rgb(122, 235, 228),
    -20px -20px 0 -2px #040C2D, -20px -20px rgb(215, 255, 103),
    -30px -30px 0 -2px #040C2D, -30px -30px rgb(237, 137, 54),
    -40px -40px 0 -2px #040C2D, -40px -40px rgb(245, 101, 101);
}

`

const CardBorderClipMe: React.FunctionComponent<ICardBorderClipMeProps> = (props) => {
  const { children, ...styles } = props
  const cardRef = React.useRef(null)

  const [clipMeAnimation, setClipMeAnimation] = React.useState(null)
  const animeTime = 8

  React.useEffect(() => {
    const boxHeight = cardRef?.current?.offsetHeight
    const boxWidth = cardRef?.current?.offsetWidth
    const clipDistance = 0.05
    const clipHeight = Math.round(boxHeight * (1 + clipDistance * 2))
    const clipWidth = Math.round(boxWidth * (1 + clipDistance * 2))
    const pathWidth = 2

    const clipMe = keyframes`
    0%, 100% {clip: rect(0px, ${clipWidth}px, ${pathWidth}px, 0px); }
    25% {clip: rect(0px, ${pathWidth}px, ${clipHeight}px, 0px); }
    50% {clip: rect(${clipHeight - pathWidth}px, ${clipWidth}px, ${clipHeight}px, 0px); }
    75% {clip: rect(0px, ${clipHeight}px, ${clipHeight}px, ${clipWidth - pathWidth}px); }
  `
    setClipMeAnimation(clipMe)
  }, [])

  return (
    // <Box
    //   ref={cardRef}
    //   width="full"
    //   height="full"
    //   margin="auto"
    //   color="#69ca62"
    //   boxShadow="inset 0 0 0 1px rgba(105, 202, 98, .5)"
    //   pos={'relative'}
    //   p={2}
    //   {...styles}
    //   _before={{
    //     content: "''",
    //     zIndex: '-1',
    //     margin: '-5%',
    //     boxShadow: 'inset 0 0 0 2px',
    //     animation: `${clipMeAnimation} ${animeTime}s linear infinite`,
    //     position: 'absolute',
    //     inset: 0,
    //     animationDelay: `${animeTime * -0.5}s`,
    //     boxSizing: 'border-box',
    //   }}
    //   _after={{
    //     content: "''",
    //     zIndex: '-1',
    //     margin: '-5%',
    //     boxShadow: 'inset 0 0 0 2px',
    //     animation: `${clipMeAnimation} ${animeTime}s linear infinite`,
    //     position: 'absolute',
    //     inset: 0,
    //     boxSizing: 'border-box',
    //   }}
    // >
    //   {children}
    // </Box>
    <Box
      backgroundColor="#040C2D"
      display="block"
      // width="full"
      // height="full"
      cursor="pointer"
      padding="15px"
      border="2px solid gray"
      rounded={'20px'}
      // boxShadow="-5px -5px 0 -2px #040C2D, -5px -5px #9F7AEA,
      //   -10px -10px 0 -2px #040C2D, -10px -10px #4299E1
      //   // -15px -15px 0 -2px #040C2D, -15px -15px #69ca62,
      //   // -20px -20px 0 -2px #040C2D, -20px -20px #FFFFF0,"
      // _hover={{
      //   animation: `${shadowWaveAnimation} 1s ease infinite`,
      // }}
    >
      {children}
    </Box>
  )
}

export default CardBorderClipMe