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

const animateFx = keyframes`
  0% { fx: 0%; }
  50% { fx: 3%; }
  100% { fx: 0%; }
`;

const animateX = keyframes`
  0% { x: 25%; }
  50% { x: 0%; }
  100% { x: 25%; }
`;

const animateY = keyframes`
  0% { y: 0%; }
  50% { y: 25%; }
  100% { y: 0%; }
`;

const animateRotate = keyframes`
  0% { transform: rotate(0 50 50); }
  100% { transform: rotate(360 50 50); }
`;

const BackgroundWrap = styled('div')`
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
`;

const SVG = styled('svg')`
  width: 100%;
  height: 100%;
`;

const GradientRect = styled('rect')`
  animation: ${animateX} 20s infinite, ${animateY} 21s infinite, ${animateRotate} 7s infinite;
  &:nth-of-type(2) {
    animation-duration: 23s, 24s, 12s;
  }
  &:nth-of-type(3) {
    animation-duration: 25s, 12s, 9s;
  }
`;

const IceCreamBackground = ({ children }) => {
  return (
    <BackgroundWrap>
      <SVG viewBox="0 0 100 100" preserveAspectRatio="xMidYMid slice">
        <defs>
          <radialGradient id="Gradient1" cx="50%" cy="50%" fx="0.441602%" fy="50%" r=".5">
            <animate attributeName="fx" dur="34s" values="0%;3%;0%" repeatCount="indefinite" />
            <stop offset="0%" stopColor="rgba(255, 0, 255, 1)" />
            <stop offset="100%" stopColor="rgba(255, 0, 255, 0)" />
          </radialGradient>
          <radialGradient id="Gradient2" cx="50%" cy="50%" fx="2.68147%" fy="50%" r=".5">
            <animate attributeName="fx" dur="23.5s" values="0%;3%;0%" repeatCount="indefinite" />
            <stop offset="0%" stopColor="rgba(255, 255, 0, 1)" />
            <stop offset="100%" stopColor="rgba(255, 255, 0, 0)" />
          </radialGradient>
          <radialGradient id="Gradient3" cx="50%" cy="50%" fx="0.836536%" fy="50%" r=".5">
            <animate attributeName="fx" dur="21.5s" values="0%;3%;0%" repeatCount="indefinite" />
            <stop offset="0%" stopColor="rgba(0, 255, 255, 1)" />
            <stop offset="100%" stopColor="rgba(0, 255, 255, 0)" />
          </radialGradient>
          <radialGradient id="Gradient4" cx="50%" cy="50%" fx="4.56417%" fy="50%" r=".5">
            <animate attributeName="fx" dur="23s" values="0%;5%;0%" repeatCount="indefinite" />
            <stop offset="0%" stopColor="rgba(0, 255, 0, 1)" />
            <stop offset="100%" stopColor="rgba(0, 255, 0, 0)" />
          </radialGradient>
          <radialGradient id="Gradient5" cx="50%" cy="50%" fx="2.65405%" fy="50%" r=".5">
            <animate attributeName="fx" dur="24.5s" values="0%;5%;0%" repeatCount="indefinite" />
            <stop offset="0%" stopColor="rgba(0,0,255, 1)" />
            <stop offset="100%" stopColor="rgba(0,0,255, 0)" />
          </radialGradient>
          <radialGradient id="Gradient6" cx="50%" cy="50%" fx="0.981338%" fy="50%" r=".5">
            <animate attributeName="fx" dur="25.5s" values="0%;5%;0%" repeatCount="indefinite" />
            <stop offset="0%" stopColor="rgba(255,0,0, 1)" />
            <stop offset="100%" stopColor="rgba(255,0,0, 0)" />
          </radialGradient>
        </defs>
        <GradientRect x="13.744%" y="1.18473%" width="100%" height="100%" fill="url(#Gradient1)" transform="rotate(334.41 50 50)" />
        <GradientRect x="-2.17916%" y="35.4267%" width="100%" height="100%" fill="url(#Gradient2)" transform="rotate(255.072 50 50)" />
        <GradientRect x="9.00483%" y="14.5733%" width="100%" height="100%" fill="url(#Gradient3)" transform="rotate(139.903 50 50)" />
      </SVG>
      {children}
    </BackgroundWrap>
  );
};

export default IceCreamBackground;