import React, { type FC, type ReactNode } from 'react';
import styled from '@emotion/styled';
import { darken } from 'polished';

const cbox = (props: any) => `
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
`;

const BoxShuffleContainer = styled.div<{ size?: string; colors?: string[] }>`
  --size: ${(props: BoxShuffleProps) => props.size || '3em'};
  position: relative;
  min-height: 180px;
  min-width: 180px;
  transform: translateX(-50%);
  display: inline-block;

  .container {
    ${cbox};
    transform-style: preserve-3d;
    perspective: 2000px;
    transform: rotateX(-30deg) rotateY(-45deg);

    *,
    *:before,
    *:after {
      box-sizing: border-box;
    }
  }

  .holder {
    ${cbox};
    transform-style: preserve-3d;
    transform: translate3d(0em, var(--size), calc(var(--size) * 0.5));

    &:nth-child(3) {
      transform: rotateY(-90deg) rotateX(90deg) translate3d(0, var(--size), calc(var(--size) * 0.5));
    }

    &:first-child {
      transform: rotateZ(-90deg) rotateX(-90deg) translate3d(0, var(--size), calc(var(--size) * 0.5));
    }
  }

  .box {
    ${cbox};
    transform-style: preserve-3d;
    animation: ani-box 6s infinite;
    width: var(--size);
    height: var(--size);
    //opacity: .9;

    &:before,
    &:after {
      position: absolute;
      width: 100%;
      height: 100%;
      content: '';
    }

    &:before {
      left: 100%;
      bottom: 0;
      transform: rotateY(90deg);
      transform-origin: 0 50%;
    }

    &:after {
      left: 0;
      bottom: 100%;
      transform: rotateX(90deg);
      transform-origin: 0 100%;
    }
  }

  .info {
    ${cbox};
    padding-top: 180px;

    .title {
      font-size: 20px;
      font-weight: 400;
      text-align: center;
      color: #212121;
    }

    .detail {
      font-size: 14px;
      font-weight: 200;
      text-align: center;
    }
  }

  @keyframes ani-box {
    8.33% {
      transform: translate3d(-50%, -50%, 0) scaleZ(2);
    }
    16.7% {
      transform: translate3d(-50%, -50%, calc(-1 * var(--size))) scaleZ(1);
    }
    25% {
      transform: translate3d(-50%, -100%, calc(-1 * var(--size))) scaleY(2);
    }
    33.3% {
      transform: translate3d(-50%, -150%, calc(-1 * var(--size))) scaleY(1);
    }
    41.7% {
      transform: translate3d(-100%, -150%, calc(-1 * var(--size))) scaleX(2);
    }
    50% {
      transform: translate3d(-150%, -150%, calc(-1 * var(--size))) scaleX(1);
    }
    58.3% {
      transform: translate3d(-150%, -150%, 0) scaleZ(2);
    }
    66.7% {
      transform: translate3d(-150%, -150%, 0) scaleZ(1);
    }
    75% {
      transform: translate3d(-150%, -100%, 0) scaleY(2);
    }
    83.3% {
      transform: translate3d(-150%, -50%, 0) scaleY(1);
    }
    91.7% {
      transform: translate3d(-100%, -50%, 0) scaleX(2);
    }
    100% {
      transform: translate3d(-50%, -50%, 0) scaleX(1);
    }
  }
  ${(props: BoxShuffleProps) =>
    (props.colors || ['#1FBCD3', '#CBE2B4', '#F6B6CA']).map(
      (color, i) => `
    .holder:nth-child(${i + 1}){
      .box{
        background-color: ${color};
        &:before{
          background-color: ${darken(0.2, color)};
        }
        &:after{
          background-color: ${darken(0.1, color)};
        }
      }
    }
  }
`,
    )}
`;

export interface BoxShuffleProps {
  size?: string;
  title?: ReactNode;
  detail?: ReactNode;
  colors?: string[];
}

export const BoxShuffle: FC<BoxShuffleProps> = (props) => {
  const { title, detail, ...rest } = props;
  return (
    <BoxShuffleContainer {...rest}>
      <div className='container'>
        <div className='holder'>
          <div className='box' />
        </div>
        <div className='holder'>
          <div className='box' />
        </div>
        <div className='holder'>
          <div className='box' />
        </div>
      </div>
      <div className='info'>
        <div className='title'>{title}</div>
        <div className='detail'>{detail}</div>
      </div>
    </BoxShuffleContainer>
  );
};