import styled, { keyframes, css } from 'styled-components';
import { getBreakpointValue } from '../../utils/responsiveBreakpoints';

const fadeIn = keyframes`
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
`;

const zoomIn = keyframes`
  from {
    transform: scale(0.5);
  }

  to {
    transform: scale(1);
  }
`;

const ModalContainer = styled.div<{
  themeOpen: boolean;
}>`
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  margin: 0;
  padding: 0;

  ${({ themeOpen }) => {
    switch (themeOpen) {
      case true:
        return css`
          display: block;
        `;
      case false:
        return css`
          display: none;
        `;
    }
  }};
`;

const ModalOverlay = styled.div`
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: auto;
  background-color: ${({ theme }) => theme.colors.modal.containerBackground};
  animation: ${fadeIn} 0.2s linear;
`;

const ModalContentWrapper = styled.div`
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 100vh;
  pointer-events: none;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  padding-top: ${({ theme }) => theme.space.modal.wrapperPaddingY};
  padding-bottom: ${({ theme }) => theme.space.modal.wrapperPaddingY};
`;

const ModalContent = styled.div<{
  themeSize: 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge';
}>`
  display: flex;
  flex-direction: column;
  max-height: 100%;
  background-color: ${({ theme }) => theme.colors.modal.contentBackground};
  border-radius: ${({ theme }) => theme.radii.modal.content};
  pointer-events: all;
  animation: ${zoomIn} 0.2s linear;
  min-width: ${({ theme }) => theme.sizes.modal.contentSmallMinWidth};
  max-width: ${({ theme }) => theme.sizes.modal.contentSmallMaxWidth};
  width: 100%;
  margin: 0;
  padding: 0;

  @media (min-width: ${getBreakpointValue('md')}px) {
    ${({ themeSize, theme }) => {
      switch (themeSize) {
        case 'small':
          return css`
            min-width: ${theme.sizes.modal.contentSmallMinWidth};
            max-width: ${theme.sizes.modal.contentSmallMaxWidth};
          `;
        case 'medium':
          return css`
            min-width: ${theme.sizes.modal.contentMediumMinWidth};
            max-width: ${theme.sizes.modal.contentMediumMaxWidth};
          `;
        case 'large':
        case 'xlarge':
        case 'xxlarge':
          return css`
            min-width: ${theme.sizes.modal.contentLargeMinWidth};
            max-width: ${theme.sizes.modal.contentLargeMaxWidth};
          `;
      }
    }};
  }

  @media (min-width: ${getBreakpointValue('lg')}px) {
    ${({ themeSize, theme }) => {
      switch (themeSize) {
        case 'xlarge':
        case 'xxlarge':
          return css`
            min-width: ${theme.sizes.modal.contentExtraLargeMinWidth};
            max-width: ${theme.sizes.modal.contentExtraLargeMaxWidth};
          `;
        default:
          return css``;
      }
    }};
  }

  @media (min-width: ${getBreakpointValue('xl')}px) {
    ${({ themeSize, theme }) => {
      switch (themeSize) {
        case 'xxlarge':
          return css`
            min-width: ${theme.sizes.modal.contentDoubleExtraLargeMinWidth};
            max-width: ${theme.sizes.modal.contentDoubleExtraLargeMaxWidth};
          `;
        default:
          return css``;
      }
    }};
  }
`;

const ModalHeader = styled.div<{
  themeVariant?: 'basic' | 'primary';
}>`
  border-radius: ${({ theme }) => theme.radii.modal.header};
  margin: 0;
  padding: ${({ theme }) => theme.space.modal.headerPadding};
  font-size: ${({ theme }) => theme.fontSizes.modal.header};
  font-weight: ${({ theme }) => theme.fontWeights.modal.header};
  line-height: ${({ theme }) => theme.lineHeights.modal.header};
  display: flex;

  ${({ themeVariant, theme }) => {
    switch (themeVariant) {
      case 'basic':
        return css`
          background-color: ${theme.colors.modal.headerBasicBackground};
          color: ${theme.colors.modal.headerBasic};
        `;
      case 'primary':
        return css`
          background-color: ${theme.colors.modal.headerPrimaryBackground};
          color: ${theme.colors.modal.headerPrimary};
        `;
      case undefined:
        return css``;
    }
  }};
`;

const ModalBody = styled.div<{ themeIsPopUp: boolean }>`
  font-size: ${({ theme }) => theme.fontSizes.modal.body};
  line-height: ${({ theme }) => theme.lineHeights.modal.body};
  font-weight: ${({ theme }) => theme.fontWeights.modal.body};
  color: ${({ theme }) => theme.colors.modal.body};
  margin: 0;
  overflow: auto;

  ${({ themeIsPopUp, theme }) => {
    switch (themeIsPopUp) {
      case true:
        return css`
          padding: ${theme.space.modal.popUpBodyPadding};
        `;
      case false:
        return css`
          padding: ${theme.space.modal.bodyPadding};
        `;
    }
  }};
`;

const CloseButton = styled.button`
  display: flex;
  align-items: center;
  border: none;
  background: transparent;
  font-size: inherit;
  margin: 0;
  margin-left: auto;
  padding: 0;
  color: inherit;

  &:hover {
    cursor: pointer;
  }

  &:focus {
    outline: none;
  }
`;

const ModalFooter = styled.div`
  text-align: right;
  margin: 0;
  padding: ${({ theme }) => theme.space.modal.footerPadding};
`;

const HeaderFooterWrapper = styled.div`
  margin: 0;
  padding: 0;
`;

const PopUpModalBodyContainer = styled.div`
  display: flex;
  margin: 0;
  padding: 0;
`;

const PopUpModalBodyTextWrapper = styled.div`
  flex: 1;
  margin: 0;
  padding: 0;
`;

const TitleSpacing = styled.div`
  margin: 0;
  padding: 0;
  margin-bottom: ${({ theme }) => theme.space.modal.popUpTitleMarginBottom};
`;

const IconWrapper = styled.div`
  font-size: ${({ theme }) => theme.fontSizes.modal.popUpIcon};
  margin: 0;
  padding: 0;
  margin-right: ${({ theme }) => theme.space.modal.popUpIconMarginRight};
`;

export {
  ModalContainer,
  ModalOverlay,
  ModalContentWrapper,
  ModalContent,
  ModalHeader,
  ModalBody,
  CloseButton,
  ModalFooter,
  HeaderFooterWrapper,
  PopUpModalBodyContainer,
  PopUpModalBodyTextWrapper,
  TitleSpacing,
  IconWrapper,
};