'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var styled = require('styled-components');
var index = require('../../utils/index.js');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);

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

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

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

  ${({ isOpened }) => isOpened
    ? styled.css `
          animation: ${overflowAppear} ${overfLowAnimationDuration}ms forwards;
          height: 100%;
        `
    : styled.css `
          animation: ${overflowDisappear} ${overfLowAnimationDuration}ms
            ${overfLowAnimationDuration}ms forwards;
          height: 0px;
        `}
`;
const BottomSheetWrapper = styled__default['default'].div `
  display: flex;
  flex-flow: column;
  font-family: ${(props) => props.theme.font.familyPrimary};
  position: fixed;
  bottom: 0px;
  color: ${index.getColorAlias('contentDefault')};
  background: ${index.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: ${index.getColorAlias('containerDefault')};
    height: 5%;
    width: 100%;
    position: absolute;
    bottom: -5%;
  }

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

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

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

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

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

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

exports.BottomSheetWrapper = BottomSheetWrapper;
exports.CustomHeaderWrapper = CustomHeaderWrapper;
exports.InnerWrapper = InnerWrapper;
exports.MainContentWrapper = MainContentWrapper;
exports.Overlay = Overlay;
exports.PullTab = PullTab;
