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

const moveForever = keyframes`
  0% {
    transform: translate3d(-90px,0,0);
  }
  100% { 
    transform: translate3d(85px,0,0);
  }
`;

const CloudsWrapper = styled('div')`
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background: linear-gradient(60deg, rgba(84,58,183,1) 0%, rgba(0,172,193,1) 100%);
  overflow: hidden;
`;

const WavesWrapper = styled('div')`
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 15vh;
`;

const Waves = styled('svg')`
  position: relative;
  width: 100%;
  height: 100%;
  margin-bottom: -7px;
  min-height: 100px;
  max-height: 150px;
`;

const Parallax = styled('g')`
  & > use {
    animation: ${moveForever} 25s cubic-bezier(.55,.5,.45,.5) infinite;
  }
  & > use:nth-of-type(1) {
    animation-delay: -2s;
    animation-duration: 7s;
  }
  & > use:nth-of-type(2) {
    animation-delay: -3s;
    animation-duration: 10s;
  }
  & > use:nth-of-type(3) {
    animation-delay: -4s;
    animation-duration: 13s;
  }
  & > use:nth-of-type(4) {
    animation-delay: -5s;
    animation-duration: 20s;
  }
`;

const CloudsBackground = ({ children }) => {
  return (
    <CloudsWrapper>
      {children}
      <WavesWrapper>
        <Waves xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink"
          viewBox="0 24 150 28" preserveAspectRatio="none" shapeRendering="auto">
          <defs>
            <path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />
          </defs>
          <Parallax className="parallax">
            <use xlinkHref="#gentle-wave" x="48" y="0" fill="rgba(255,255,255,0.7" />
            <use xlinkHref="#gentle-wave" x="48" y="3" fill="rgba(255,255,255,0.5)" />
            <use xlinkHref="#gentle-wave" x="48" y="5" fill="rgba(255,255,255,0.3)" />
            <use xlinkHref="#gentle-wave" x="48" y="7" fill="#fff" />
          </Parallax>
        </Waves>
      </WavesWrapper>
    </CloudsWrapper>
  );
};

export default CloudsBackground;