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

const adjustHue = keyframes`
  0% { filter: hue-rotate(30deg); }
  50% { filter: hue-rotate(60deg); }
  100% { filter: hue-rotate(90deg); }
`;

const loading = keyframes`
  to { transform: rotate(360deg); }
`;

const blinker = keyframes`
  0% { opacity: 1.0; }
  50% { opacity: 0.3; }
  100% { opacity: 1.0; }
`;

const TrippyWrapper = styled('div')`
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background: #000;
  overflow: hidden;
  animation: ${adjustHue} 1s alternate infinite;
  background: radial-gradient(#0B853D 3px, transparent 5px, #000 7px, transparent 9px, #0B853D 11px, transparent 13px, 15px, transparent 17px, #000 19px, transparent 21px, #0B853D 23px, transparent 25px, #fff 27px, transparent 29px, #000 31px, transparent 33px);
  background-size: 32px 32px;
`;

const Circle = styled('div')`
  width: 95vw;
  height: 95vh;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  position: absolute;
  background: radial-gradient(#0B853D 3px, transparent 5px, #000 7px, transparent 9px, #0B853D 11px, transparent 13px, 15px, transparent 17px, #000 19px, transparent 21px, #0B853D 23px, transparent 25px, #fff 27px, transparent 29px, #000 31px, transparent 33px);
  background-size: 30px 30px;
  animation: ${blinker} 3s linear infinite;
`;

const TrippyBackground = ({ children }) => {
  return (
    <TrippyWrapper>
      <Circle />
      {children}
    </TrippyWrapper>
  );
};

export default TrippyBackground;