import styled, { css, keyframes } from 'styled-components';

import Colors from '../Colors';
import Sizes from '../Sizes';

const onAnimation = (from: number, mid:number, to: number) => keyframes`
  0% { transform: scale(${from}); }
	40% { transform: scale(${mid}); }
	60% { transform: scale(${to}); }
`;

const onOpacity = (from: number, to: number) => keyframes`
  from { opacity: ${from} };
  to { opacitu: ${to}}
`;

export const ModalStyle = styled.div<{animation: string; type: string}>`
  display: flex;
  flex-wrap: wrap;
  overflow-y: scroll;
  z-index: 9999;
  background-color: ${Colors.white};
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  padding: ${Sizes.s5}px 20px 20px;
  will-change: transfrom;

  ${({ animation }) => animation === 'enter' ?
    css`animation: ${onAnimation(0, 1.1, 1)} .7s forwards;` :
    css`animation: ${onAnimation(1, 1.1, 0)} .7s forwards;`
  };

  ${({ type }) => type === 'default' && `
    @media screen and (min-width: 768px) {
      padding: ${Sizes.s5}px ${Sizes.s5}px ${Sizes.s5}px;
      width: 90%;
      height: 85vh;
      margin: 67px auto 0;
      max-width: 756px;
    }
  `}

  ${({ type }) => type === 'small' && `
    @media screen and (min-width: 768px) {
      display: table;
      padding: ${Sizes.s5}px ${Sizes.s4 - 5}px ${Sizes.s5}px;
      max-width: 375px;
      max-height: 300px;
      top: 50%;
      margin: -150px auto 0;
    }
  `}

  ${({ type }) => type === 'full' && `
    @media screen and (min-width: 768px) {
      padding: ${Sizes.s5}px ${Sizes.s7}px;
    }
  `}
`;

export const Close = styled.button<{isType: string}>`
  appearance: none;
  background-color: transparent;
  border: 0 none;
  cursor: pointer;
  position: absolute;
  right: ${Sizes.s7}px;

  ${({ isType }) => isType !== 'full' && `
    right: ${Sizes.s5}px;
  `}

  ${({ isType }) => isType !== 'full' && `
    right: ${Sizes.s4}px;
  `}

  @media screen and (max-width: 600px) {
    width: 100vw;
    background-color: white;
    position: fixed;
    left: 0;
    top: 0;
    padding-right: 20px;
    padding-top: 10px;
    text-align: right;
  }
`;

export const WrapperButton = styled.div`
  text-align: right;
  align-self: flex-end;
  flex-grow: 1;
  margin-top: ${Sizes.s5}px;

  & button:nth-child(2) {
    margin-left: ${Sizes.s4}px;
  }
`;

export const Overlay = styled.div<{animation: string}>`
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.5);
  transition: .7s all;
  opacity: 0;

  ${({ animation }) => animation === 'enter' ?
    css`animation: ${onOpacity(0, 1)} .7s forwards; opacity: 1` :
    css`animation: ${onOpacity(1, 0)} .7s forwards;`
  };
`;