import { lightLine, smoke } 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%;
  height: 100%;
  min-height: 200px;
  overflow: hidden;
  > div {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: stretch;
    align-items: center;
    gap: 2px;
  }
`;

const rightStretchFrames = keyframes`
  0% {
    width: 50%;
  }
  25% {
    width: 25%;
  }
  75% {
    width: 75%;
  }
  100% {
    width: 50%;
  }
`;

const leftStretchFrames = keyframes`
  0% {
    width: 50%;
  }
  25% {
    width: 75%;
  }
  75% {
    width: 25%;
  }
  100% {
    width: 50%;
  }
`;

const StretchableSection = styled.div`
  display: flex;
  align-items: center;
  height: calc(100% - 64px);
  width: 50%;
  justify-content: space-between;
  position: relative;
  animation: ${leftStretchFrames} 5s ease-in-out infinite;
  &.right-side {
    animation: ${rightStretchFrames} 5s ease-in-out infinite;
  }
  &.right-side:before {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    top: -100%;
    bottom: -100%;
    background-color: ${smoke};
    width: 2px;
  }
  &.right-side:after {
    content: '';
    display: block;
    position: absolute;
    top: 100%;
    left: -7px;
    height: 24px;
    width: 16px;
    margin-top: 12px;
    clip-path: polygon(50% 0, 100% 8px, 100% 100%, 0 100%, 0 8px, 50% 0);
    background-color: ${smoke};
  }
`;

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

const waveform = [
  68, 87, 60, 56, 55, 53, 50, 47, 45, 42, 40, 19, 12, 9, 5, 2, 2, 1, 1, 1, 1, 2, 37, 59, 69, 60, 57, 53, 54, 51, 49, 42,
  18, 8, 4, 3, 2, 1, 1, 1, 3, 4, 2, 1, 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 AudioWarping = () => {
  return (
    <GridAnimationWrapper>
      <OnScreenOnly>
        <StretchableSection>
          {waveform.slice(0, 46).map((h, i) => (
            <WaveformBlock height={h} key={i} />
          ))}
        </StretchableSection>
        <StretchableSection className="right-side">
          {waveform.slice(46).map((h, i) => (
            <WaveformBlock height={h} key={i} />
          ))}
        </StretchableSection>
      </OnScreenOnly>
    </GridAnimationWrapper>
  );
};

export default AudioWarping;