import { lightLine, wine } from '@/styles/colors';
import { keyframes } from '@emotion/react';
import styled from '@emotion/styled';
import OnScreenOnly from '../OnScreenOnly';

const GridAnimationWrapper = styled.div`
  background: ${lightLine};
  width: 100%;
  aspect-ratio: 1;
  > div {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
  }
`;

const CircleWrapper = styled.div`
  position: relative;
  width: 100%;
  height: 100%;
`;

const enlarge = keyframes`
0% { transform: scale(1); opacity: 1; }
25% { transform: scale(1); opacity: 1; }
50% { transform: scale(1000); opacity: 1; }
50% { transform: scale(1000); opacity: 0; }
100% { transform: scale(1); opacity: 0; }
`;
const enlargeReversed = keyframes`
0% { transform: scale(1000);  opacity: 0 }
25% { transform: scale(1000); opacity: 0 }
50% { transform: scale(1000); opacity: 1 }
50% { transform: scale(1); opacity: 1 }
100% { transform: scale(1); opacity: 0 }
`;

const Circle = styled.div`
  position: absolute;
  height: 1px;
  width: 1px;
  top: 50%;
  left: 50%;
  border-radius: 100px;
  background: ${wine}55;
  animation: ${enlarge} 8s ease-in infinite alternate;
`;
const ReverseCircle = styled.div`
  position: absolute;
  height: 1px;
  width: 1px;
  top: 50%;
  left: 50%;
  border-radius: 100px;
  background: #ffffff55;
  animation: ${enlargeReversed} 8s ease-in infinite alternate;
`;

const waveform = [
  1, 3, 69, 100, 90, 73, 71, 68, 65, 62, 60, 58, 58, 57, 55, 52, 51, 49, 48, 47, 46, 44, 17, 11, 10, 39, 31, 26, 25, 24,
  23, 21, 20, 19, 17, 11, 11, 10, 9, 8, 3, 4, 2, 2, 3, 5, 1, 1, 1, 2, 1, 2, 2, 1, 1, 1,
];

const WaveformBlock = styled.div<{ height: number }>`
  width: 3px;
  height: ${(props) => props.height}%;
  background-color: rgb(129, 79, 110);
`;

const WaveformContainer = styled.div`
  display: flex;
  height: 100px;
  width: 100px;
  z-index: 2;
  align-items: center;
  justify-content: space-between;
  position: absolute;
`;

const ConvolutionReverb = () => {
  return (
    <GridAnimationWrapper>
      <OnScreenOnly>
        <WaveformContainer>
          {waveform.map((h, i) => (
            <WaveformBlock height={h} key={i} />
          ))}
        </WaveformContainer>
        <CircleWrapper>
          <Circle />
          <ReverseCircle />
        </CircleWrapper>
      </OnScreenOnly>
    </GridAnimationWrapper>
  );
};

export default ConvolutionReverb;