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

const move = keyframes`
  from {
    transform: rotate(0deg) scale(12) translateX(-20px);
  }
  to {
    transform: rotate(360deg) scale(18) translateX(20px);
  }
`;

const generateDots = (count) => {
  let textShadow = '';
  for (let i = 0; i <= count; i++) {
    const x = (-0.5 + Math.random() * 3) + 'em';
    const y = (-0.5 + Math.random() * 3) + 'em';
    const color = `hsla(${Math.random() * 360}, 100%, 50%, 0.9)`;
    textShadow += `${x} ${y} 7px ${color}, `;
  }
  return textShadow.slice(0, -2);
};

const IllusionWrapper = styled('div')`
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #123;
`;

const DotElement = styled('div')`
  display: block;
  font-size: 52px;
  color: transparent;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;

  &::before, &::after {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 3em;
    height: 3em;
    content: '.';
    mix-blend-mode: screen;
    animation: ${move} 44s -27s infinite ease-in-out alternate;
  }

  &::before {
    text-shadow: ${(props) => generateDots(40)};
    animation-duration: 44s;
    animation-delay: -27s;
  }

  &::after {
    text-shadow: ${(props) => generateDots(40)};
    animation-duration: 43s;
    animation-delay: -32s;
  }
`;

const IllusionBackground = ({ children }) => {
  return (
    <IllusionWrapper>
      <DotElement />
      {children}
    </IllusionWrapper>
  );
};

export default IllusionBackground;