import React from 'react';
import { styled, keyframes, css } from '@mui/system';

const drop = keyframes`
  0% {
    opacity: 0;
    transform: translate3d(0, 150vh, 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
`;

const Wrap = styled('div')`
  position: relative;
  height: 100%;
  width: 100%;
`;

const generatePaintDripStyles = (total) => {
  let styles = '';

  for (let i = 1; i <= total; i++) {
    const hue = (300 / total) * i;
    styles += `
      &:nth-of-type(${i}) {
        left: ${(i - 1) * 0.69444}%;
        background-image: linear-gradient(to bottom, black, hsla(${hue}, 100%, 50%, .8));
        animation-delay: ${Math.random() * -4}s;
        &:after {
          background: hsla(${hue}, 100%, 50%, 1);
        }
      }
    `;
  }

  return css`${styles}`;
};

const PaintDripItem = styled('div')`
  position: absolute;
  bottom: 0;
  height: 400px;
  width: 0.69444%;
  animation: ${drop} 4s infinite ease-in;
  &:after {
    content: "";
    position: absolute;
    width: 0.9vw;
    height: 0.9vw;
    border-radius: 50%;
    left: 50%;
    top: -0.45vw;
    transform: translateX(-50%);
  }
  ${generatePaintDripStyles(144)}
`;

const PaintDripBackground = ({ children }) => {
  const total = 144;

  return (
    <Wrap>
      {Array.from({ length: total }).map((_, index) => (
        <PaintDripItem key={index} />
      ))}
      {children}
    </Wrap>
  );
};

export default PaintDripBackground;