import { ash, lightLine, lightPastelBlue, smoke } from '@/styles/colors';
import { keyframes } from '@emotion/react';
import styled from '@emotion/styled';

const GridAnimationWrapper = styled.div`
  background: ${lightLine};
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
  display: flex;
  justify-content: center;
  &:before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 50%;
    background-color: ${lightPastelBlue};
  }
`;

const AnimationContent = styled.div`
  min-height: 200px;
  padding: 10px 30px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
  min-width: 580px;
`;

const WavToolWindow = styled.div`
  display: flex;
  flex-direction: column;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 2px;
  position: relative;
`;

const ButtonRow = styled.div`
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  gap: 6px;
  padding: 5px 10px;
  background-color: white;
`;
const Button = styled.div<{ color: string }>`
  height: 7px;
  width: 7px;
  margin: 0;
  border-radius: 100px;
  background: ${({ color }) => color};
`;

const WindowBody = styled.div`
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
`;

const MidiClip = styled.div`
  width: 200px;
  height: 100px;
  background-color: ${smoke};
  border-radius: 2px;
  padding: 10px;
`;

const NoteContainer = styled.div<{ x: number; y: number }>`
  position: absolute;
  transform: translate(${(props) => `${props.x}px, ${props.y}px`});
`;

const MidiNote = ({ x = 0, y = 0 }: { x?: number; y?: number }) => {
  return (
    <NoteContainer x={x} y={y}>
      <div style={{ height: 4, width: 25, background: lightLine, transform: 'translateY(-5px)' }}></div>
    </NoteContainer>
  );
};

const noteAnimation = keyframes`
0% { transform: translateY(0); }
33% { transform: translateY(0); }
66% { transform: translateY(30px); }
100% { transform: translateY(30px); }
`;
const AnimatedMidiNote = styled.div`
  animation: ${noteAnimation} 4s ease infinite;
  animation-direction: alternate-reverse;
`;
const DelayedAnimatedMidiNote = styled.div`
  animation: ${noteAnimation} 4s ease infinite;
  animation-direction: alternate-reverse;
  animation-delay: 1s;
`;
const LineLeft = styled.div`
  background: ${smoke};
  position: relative;
  width: 50%;
  top: -50px;
  &:after {
    content: '';
    display: block;
    position: absolute;
    right: 0;
    height: 101px;
    width: 1px;
    background: inherit;
  }
  height: 1px;
`;
const LineRight = styled.div`
  background: ${smoke};
  position: relative;
  width: 50%;
  top: 50px;
  height: 1px;
  &:after {
    content: '';
    display: block;
    position: absolute;
    right: 0;
    top: -3px;
    transform: rotate(-45deg);
    width: 7px;
    height: 7px;
    border-right: 1px solid ${smoke};
    border-bottom: 1px solid ${smoke};
  }
`;

const CloudSaving = () => {
  return (
    <GridAnimationWrapper>
      <AnimationContent>
        <WavToolWindow>
          <ButtonRow>
            <Button color="green"></Button>
            <Button color={ash}></Button>
            <Button color={ash}></Button>
          </ButtonRow>
          <WindowBody>
            <MidiClip>
              <MidiNote y={10} x={-1} />
              <AnimatedMidiNote>
                <MidiNote y={40} x={50} />
              </AnimatedMidiNote>
              <MidiNote y={70} x={101} />
              <AnimatedMidiNote>
                <MidiNote y={60} x={151} />
              </AnimatedMidiNote>
            </MidiClip>
          </WindowBody>
        </WavToolWindow>
        <LineLeft />
        <LineRight />
        <WavToolWindow>
          <ButtonRow>
            <Button color="green"></Button>
            <Button color={ash}></Button>
            <Button color={ash}></Button>
          </ButtonRow>
          <WindowBody>
            <MidiClip>
              <MidiNote y={10} x={-1} />
              <DelayedAnimatedMidiNote>
                <MidiNote y={40} x={50} />
              </DelayedAnimatedMidiNote>
              <MidiNote y={70} x={101} />
              <DelayedAnimatedMidiNote>
                <MidiNote y={60} x={151} />
              </DelayedAnimatedMidiNote>
            </MidiClip>
          </WindowBody>
        </WavToolWindow>
      </AnimationContent>
    </GridAnimationWrapper>
  );
};

export default CloudSaving;