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

const gridAnimation = keyframes`
0% {
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}

25% {
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 5fr 1fr;
}

50% {
  grid-template-columns: 1fr 5fr 1fr;
  grid-template-rows: 1fr 5fr;
}

75% {
  grid-template-columns: 5fr 1fr 1fr;
  grid-template-rows: 5fr 1fr;
}

100% {
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}
`;

const GridAnimationWrapper = styled.div`
  background: white;
  width: 100%;
  height: 100%;
  overflow: hidden;
  min-height: 200px;
  > div {
    width: 100%;
    height: 100%;
  }
`;

const AnimatedPart = styled.div`
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-template-areas: 'red green orange' 'blue blue orange';
  animation: ${gridAnimation} 10s ease-in-out infinite;
  gap: 6px;
`;

const GridSquare1 = styled.div`
  grid-area: red;
  background: ${lightLine};
`;
const GridSquare2 = styled.div`
  grid-area: green;
  background: ${court};
`;
const GridSquare3 = styled.div`
  grid-area: blue;
  background: ${lightLine};
`;
const GridSquare4 = styled.div`
  grid-area: orange;
  background: ${lightLine};
`;

const PanelsAnimation = () => {
  return (
    <GridAnimationWrapper>
      <OnScreenOnly>
        <AnimatedPart>
          <GridSquare1 />
          <GridSquare2 />
          <GridSquare3 />
          <GridSquare4 />
        </AnimatedPart>
      </OnScreenOnly>
    </GridAnimationWrapper>
  );
};

export default PanelsAnimation;