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

const overfLowAnimationDuration = 100;
const overflowAppear = keyframes `
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
`;
const overflowDisappear = keyframes `
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
`;
const showBottomSheet = keyframes `
  0% {
    transform: translateY(100%);
  }
  75% {
    transform: translateY(-5%);
  }
  100% {
    transform: translateY(0%);
  }
`;
const Overlay = styled.div.withConfig({
    shouldForwardProp: convertToTransientProps([
        'isOpened',
        'allowBackgroundInteractions',
        'isOpened',
    ]),
}) `
  inset: 0;
  position: fixed;
  background-color: ${({ allowBackgroundInteractions: allowInteractions }) => allowInteractions ? 'transparent' : getColorAlias('overlay')};
  z-index: 5000;
  display: flex;
  justify-content: center;

  ${({ allowBackgroundInteractions }) => allowBackgroundInteractions &&
    css `
      pointer-events: none;

      > div {
        pointer-events: auto;
      }
    `}

  ${({ isOpened }) => isOpened
    ? css `
          animation: ${overflowAppear} ${overfLowAnimationDuration}ms forwards;
          height: 100%;
        `
    : css `
          animation: ${overflowDisappear} ${overfLowAnimationDuration}ms
            ${overfLowAnimationDuration}ms forwards;
          height: 0px;
        `}
`;
const BottomSheetWrapper = styled.div `
  display: flex;
  flex-flow: column;
  font-family: ${(props) => props.theme.font.familyPrimary};
  position: fixed;
  bottom: 0px;
  color: ${getColorAlias('contentDefault')};
  background: ${getColorAlias('containerDefault')};
  border-radius: ${({ theme: { radius } }) => `${radius.roundedC} ${radius.roundedC} ${radius.roundedNone} ${radius.roundedNone}`};
  min-width: 320px;
  box-shadow: rgb(0 0 0 / 20%) 0px -5px 9px -3px;

  animation: ${showBottomSheet} cubic-bezier(0.215, 0.61, 0.355, 1);
  animation-fill-mode: forwards;
  animation-duration: 300ms;
  width: 100%;
  z-index: 1000;

  ::after {
    content: '';
    background: ${getColorAlias('containerDefault')};
    height: 5%;
    width: 100%;
    position: absolute;
    bottom: -5%;
  }

  svg {
    fill: ${getColorAlias('contentDefault')};
    height: 20px;
    width: 20px;
  }

  ${({ position }) => {
    switch (position) {
        case 'left':
            return css `
          left: 0;
        `;
        case 'right':
            return css `
          right: 0;
        `;
    }
}}

  ${({ width }) => width
    ? css `
          width: ${width};
        `
    : css `
          max-width: 480px;
        `}

  ${({ height }) => height
    ? css `
          height: ${height};
        `
    : css `
          max-height: 406px;
        `}
`;
const MainContentWrapper = styled.div `
  display: flex;
  flex-flow: column;
  flex-grow: 1;
  overflow: auto;
`;
const InnerWrapper = styled.div.withConfig({
    shouldForwardProp: convertToTransientProps([
        'pinnedHeader',
        'pinnedFooter',
    ]),
}) `
  ${({ pinnedFooter }) => !pinnedFooter &&
    css `
      display: inline-flex;
      flex-flow: column;
      flex-grow: 1;
      justify-content: space-between;
    `}

  ${({ pinnedHeader }) => pinnedHeader &&
    css `
      overflow-y: auto;
    `}
`;
const PullTab = styled.div.withConfig({
    shouldForwardProp: convertToTransientProps(['hasPullTab']),
}) `
  width: 100%;
  height: 20px;
  position: absolute;
  cursor: pointer;
  background: ${getColorAlias('containerDefault')};
  border-radius: ${({ theme: { radius } }) => `${radius.roundedC} ${radius.roundedC} ${radius.roundedNone} ${radius.roundedNone}`};
  z-index: 1;

  ${({ hasPullTab }) => hasPullTab &&
    css `
      ::before {
        content: '';
        position: absolute;
        display: inline;
        top: 0px;
        left: 50%;
        transform: translate(-50%, 8px);
        width: 32px;
        height: 4px;
        background: ${getColorAlias('borderStrong')};
        border-radius: ${({ theme }) => theme.radius.roundedC};
      }
      background: unset;
    `}
`;
const CustomHeaderWrapper = styled.div `
  border-radius: ${({ theme: { radius } }) => `${radius.roundedC} ${radius.roundedC} ${radius.roundedNone} ${radius.roundedNone}`};
`;

export { BottomSheetWrapper, CustomHeaderWrapper, InnerWrapper, MainContentWrapper, Overlay, PullTab };
