import React from 'react';
import styled, {
  keyframes
} from 'styled-components';

import {
  ANIMATION_ENTER,
  ANIMATION_LEAVE
} from '../const';

const kfZoomIn = keyframes`
  from {
    opacity: 0;
    transform: scale3d(.3, .3, .3);
  }
  
  50% {
    opacity: 1;
  }
  
  to {
    opacity: 1;
  }
`;
const kfZoomOut = keyframes`
  from {
    opacity: 1;
  }
  
  50% {
    opacity: 0;
    transform: scale3d(.3, .3, .3);
  }
  
  to {
    opacity: 0;
  }
`;

const ScDivZoomInOut = styled.div`
  font-size: 96px;
  text-align: center;
  
  &.${ANIMATION_ENTER} {
    opacity: 0;
  }
  
  &.${ANIMATION_ENTER}-active {
    animation: ${kfZoomIn} 500ms linear;
  }
  
  &.${ANIMATION_LEAVE} {
    opacity: 1;
  }
  
  &.${ANIMATION_LEAVE}-active {
    animation: ${kfZoomOut} 500ms linear;
  }
`;

export default function DivZoomInOut(): JSX.Element {
  return <ScDivZoomInOut>Animate ZoomInOut</ScDivZoomInOut>;
}