import { lightLine, lightPastelBlue, smoke } from '@/styles/colors';
import { keyframes } from '@emotion/react';
import styled from '@emotion/styled';
import WaveformSVG from '../../icons/DarkWaveform.svg';
import OnScreenOnly from '../OnScreenOnly';

const ANIMATION_TIME_SECONDS = 5;
const ANIMATION_TIME_MS = ANIMATION_TIME_SECONDS * 1000;

const GridAnimationWrapper = styled.div`
  background: ${lightLine};
  width: 100%;
  height: 100%;
  min-height: 200px;
  position: relative;
  overflow: hidden;
  flex-grow: 0;
  &:before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    bottom: 50%;
    left: 0;
    right: 50%;
    background-color: ${smoke};
  }
  &:after {
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    bottom: 0;
    left: 0;
    right: 50%;
    background-color: ${lightPastelBlue};
    border-top: 10px solid white;
  }
`;

const MIDIAnimation = keyframes`
0% {
  right: 30%;
}
100% {
  right: 100%;
}
`;

const AudioAnimation = keyframes`
0% {
  left: 50%;
}
100% {
  left: -20%;
}
`;

const MIDIBlock = styled.div<{ y?: number; delay?: number }>`
  height: 5%;
  width: 50px;
  right: 30%;
  background-color: ${lightPastelBlue};
  position: absolute;
  top: ${({ y = 0 }) => y}%;
  animation: ${MIDIAnimation} ${ANIMATION_TIME_SECONDS}s linear infinite;
  animation-delay: ${({ delay = 0 }) => delay}ms;
`;

const AudioBlock = styled.div<{ delay?: number }>`
  height: 80px;
  width: 20%;
  position: absolute;
  left: 50%;
  top: 50%;
  animation: ${AudioAnimation} ${ANIMATION_TIME_SECONDS}s linear infinite;
  animation-delay: ${({ delay = 0 }) => delay}ms;
  overflow: hidden;
  z-index: 2;
`;

const Cover = styled.div`
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  right: 0;
  z-index: 2;
  background-color: ${lightLine};
  border-radius: 0 20px 20px 0;
  border-left: 1px solid white;
`;

const Line = styled.div`
  height: 3px;
  width: 100%;
  transform: translateY(155px);
  background: ${smoke};
  position: relative;
  z-index: 3;
`;

const AudioMidiRecording = () => {
  return (
    <GridAnimationWrapper>
      <OnScreenOnly>
        <MIDIBlock y={5} />
        <MIDIBlock y={25} delay={ANIMATION_TIME_MS / 4} />
        <MIDIBlock y={40} delay={ANIMATION_TIME_MS / 4} />
        <MIDIBlock y={30} delay={ANIMATION_TIME_MS / 2} />
        <MIDIBlock y={40} delay={ANIMATION_TIME_MS / 2} />
        <AudioBlock>
          <img {...WaveformSVG} />
        </AudioBlock>
        <AudioBlock delay={ANIMATION_TIME_MS / 4}>
          <img {...WaveformSVG} />
        </AudioBlock>
        <AudioBlock delay={(2 * ANIMATION_TIME_MS) / 4}>
          <img {...WaveformSVG} />
        </AudioBlock>
        <AudioBlock delay={(3 * ANIMATION_TIME_MS) / 4}>
          <img {...WaveformSVG} />
        </AudioBlock>
        <Line />
        <Cover />
      </OnScreenOnly>
    </GridAnimationWrapper>
  );
};

export default AudioMidiRecording;