import styled, { keyframes, css } from 'styled-components';
import { convertToTransientProps, getColorAlias, getSpacing, getFontSize } from '../../utils/index.js';
import { getModalSize } from './utils.js';

const animationDuration = 200;
const appear = keyframes `
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
`;
const disappear = keyframes `
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
`;
const Overlay = styled.div.withConfig({
    shouldForwardProp: convertToTransientProps(['isOpen']),
}) `
  inset: 0;
  position: fixed;
  background-color: ${getColorAlias('overlay')};
  z-index: 5000;

  display: flex;
  justify-content: center;

  ${(props) => props.isOpen
    ? css `
          animation: ${appear} ${animationDuration}ms forwards;
        `
    : css `
          animation: ${disappear} ${animationDuration}ms ${animationDuration}ms
            forwards;
        `}
`;
const Dialog = styled.div `
  --height-offset: ${({ position }) => (position === 'top' ? 2 : 1)};
  --dialog-gutter: ${({ variant }) => variant === 'narrow' ? getSpacing('s04') : getSpacing('s05')};
  max-height: calc(100vh - ${getSpacing('s09')} * var(--height-offset));
  width: calc(100vw - 60px);
  max-width: ${({ size }) => getModalSize(size)};
  display: flex;
  flex-direction: column;
  font-family: ${(props) => props.theme.font.familyPrimary};
  background-color: ${getColorAlias('backgroundDefault')};
  color: ${getColorAlias('contentDefault')};
  position: fixed;
  padding-top: var(--dialog-gutter);
  padding-bottom: var(--dialog-gutter);
  box-shadow: ${(props) => props.theme.elevation.e4};
  outline: none;
  border-radius: ${getSpacing('s04')};
  overflow-y: auto;

  ${({ position }) => position === 'center'
    ? css `
          align-self: center;
        `
    : css `
          margin-top: ${getSpacing('s10')};
          @media (max-height: 600px) {
            margin-top: 5vh;
          }
        `};
`;
const StyledModalHeader = styled.div `
  --header-gutter: ${({ variant }) => variant === 'narrow' ? getSpacing('s04') : getSpacing('s05')};
  padding-left: var(--header-gutter);
  padding-right: var(--header-gutter);
  position: sticky;
  top: ${getSpacing('s00')};

  button {
    position: absolute;
    right: var(--header-gutter);
    top: calc(${getSpacing('s02')} * -1);
    width: ${getSpacing('s07')};
    height: ${getSpacing('s07')};

    svg {
      width: ${getSpacing('s05')};
      height: ${getSpacing('s05')};
      fill: ${getColorAlias('contentDefault')};
    }

    @media print {
      display: none;
    }
  }
`;
const ModalTitle = styled.h1.withConfig({
    shouldForwardProp: convertToTransientProps([
        'hideCloseIcon',
    ]),
}) `
  ${({ variant }) => variant === 'narrow' ? getFontSize('size20') : getFontSize('size24')}
  color: ${getColorAlias('contentDefault')};
  margin-top: ${getSpacing('s00')};
  margin-right: ${getSpacing('s00')};
  margin-bottom: ${getSpacing('s04')};
  margin-left: ${getSpacing('s00')};
  font-weight: 800;
  word-break: break-word;

  ${({ hideCloseIcon }) => !hideCloseIcon &&
    css `
      width: calc(100% - ${getSpacing('s08')});
    `};

  ${({ mode }) => mode === 'truncated' &&
    css `
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    `};
`;
const StyledModalContent = styled.div.withConfig({
    shouldForwardProp: convertToTransientProps([
        'pinnedFooter',
        'stackedActionButtons',
    ]),
}) `
  --content-margin: calc(${getSpacing('s10')} - ${getSpacing('s01')});
  --content-gutter: ${({ variant }) => variant === 'narrow' ? getSpacing('s04') : getSpacing('s05')};
  overflow-y: auto;
  padding-left: var(--content-gutter);
  padding-right: var(--content-gutter);

  ${({ pinnedFooter, action, stackedActionButtons, theme }) => pinnedFooter &&
    action &&
    css `
      margin-bottom: calc(
        var(--content-margin) *
          ${stackedActionButtons && action === 'confirm' ? 2 : 1}
      );

      ${theme.mode === 'light' &&
        css `
        /* Shadow if content is scrollable */
        background: linear-gradient(white 30%, transparent) center top,
          linear-gradient(transparent, white 70%) center bottom,
          radial-gradient(farthest-side at 50% 0, transparent, rgba(0, 0, 0, 0))
            center top,
          radial-gradient(
              farthest-side at 50% 100%,
              rgba(0, 0, 0, 0.3),
              rgba(0, 0, 0, 0)
            )
            center bottom;

        background-repeat: no-repeat;
        background-size: 100% 40px, 100% 40px, 100% 14px, 110% 14px;
        background-attachment: local, local, scroll, scroll;
      `}
    `};
`;
const ModalFooter = styled.div.withConfig({
    shouldForwardProp: convertToTransientProps([
        'pinnedFooter',
        'stackedActionButtons',
    ]),
}) `
  display: flex;
  box-sizing: initial;

  ${({ stackedActionButtons }) => stackedActionButtons
    ? css `
          flex-direction: column;
          justify-content: center;

          button {
            &:not(:last-child) {
              margin-bottom: ${getSpacing('s04')};
            }
          }
        `
    : css `
          justify-content: flex-end;

          button {
            &:not(:last-child) {
              margin-right: ${getSpacing('s04')};
            }
          }
        `}

  ${({ pinnedFooter, variant }) => pinnedFooter
    ? css `
          --footer-gutter: ${variant === 'narrow'
        ? getSpacing('s04')
        : getSpacing('s05')};
          position: absolute;
          bottom: 0;
          left: 0;
          width: calc(100% - var(--footer-gutter) * 2);
          padding: var(--footer-gutter);
        `
    : css `
          margin-top: ${getSpacing('s05')};
        `}
`;
const ModalLoadingWrapper = styled.div `
  display: flex;
  align-items: center;
  justify-content: center;
  height: 188px;
`;

export { Dialog, ModalFooter, ModalLoadingWrapper, ModalTitle, Overlay, StyledModalContent, StyledModalHeader };
