"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.FooterWrapper = exports.ChildrenWrapper = exports.HeaderWrapper = exports.ContentWrapperPadding = exports.Content = exports.ContentWrapper = void 0;
const react_1 = require("@emotion/react");
const styled_1 = __importDefault(require("@emotion/styled"));
const Colors_1 = require("../../../core/Colors");
const style_constants_1 = require("../../../constants/style.constants");
const media_util_1 = require("../../../utils/media.util");
const DEFAULT_BOTTOM_VALUE = '100%';
const up = (0, react_1.keyframes) `
	from {
		transform: translate(0, ${DEFAULT_BOTTOM_VALUE});
		}
	to {
		transform: translate(0, 0);
	}
`;
const down = (0, react_1.keyframes) `
	from {
		transform: translate(0, 0);
	}
	to {
		transform: translate(0, ${DEFAULT_BOTTOM_VALUE});
	}
`;
const bottomSettings = (visible, vh, minHeight) => {
    let mobileMinHeight = 'initial';
    switch (minHeight) {
        case 's':
            mobileMinHeight = vh * 0.3 + 'px';
            break;
        case 'm':
            mobileMinHeight = vh * 0.6 + 'px';
            break;
        case 'l':
            mobileMinHeight = vh * 0.9 + 'px';
            break;
        case 'full':
            mobileMinHeight = vh + 'px';
            break;
    }
    const isFullPage = minHeight === 'full';
    return (0, react_1.css) `
		animation: ${visible
        ? (0, react_1.css) `
					${up} 0.3s forwards
			  `
        : (0, react_1.css) `
					${down} 0.3s forwards
			  `};

		min-height: ${mobileMinHeight};
		max-height: calc(${vh - (isFullPage ? 0 : 45)}px);
		border-top-right-radius: ${isFullPage ? 0 : '10px'};
		border-top-left-radius: ${isFullPage ? 0 : '10px'};

		${(0, media_util_1.Larger)((0, react_1.css) `
			animation: none;
		`)}
	`;
};
exports.ContentWrapper = styled_1.default.div `
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100%;

	display: flex;
	justify-content: center;
	align-items: center;

	${(0, media_util_1.Larger)((0, react_1.css) `
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);

		width: auto;
	`)}
`;
exports.Content = styled_1.default.div `
	display: flex;
	flex-direction: column;
	width: 100%;
	background-color: ${Colors_1.basicColors.white};
	z-index: ${(el) => el.zIndex + 1};

	${({ visible, minHeight, vh }) => bottomSettings(visible, vh, minHeight)};

	${({ vh }) => (0, media_util_1.Larger)((0, react_1.css) `
			width: 360px;
			max-height: calc(${vh - 120}px);
			min-height: initial;
			border-radius: 10px;
		`)}
`;
exports.ContentWrapperPadding = 25;
exports.HeaderWrapper = styled_1.default.div `
	flex: none;
	width: 100%;
`;
exports.ChildrenWrapper = styled_1.default.div `
	flex: 1;

	${({ hideOverflow = true }) => hideOverflow && 'overflow-y: auto;'}

	${({ hasContentPadding = true, hasFullHeight = false, hasBottomPadding = true }) => {
    const bottomPadding = hasFullHeight ? 0 : hasBottomPadding ? style_constants_1.LayoutSpacing.bottomMargin.mobile : 0;
    if (hasContentPadding) {
        return (0, react_1.css) `
				padding: 0 ${exports.ContentWrapperPadding}px ${bottomPadding}px;
			`;
    }
    else {
        return (0, react_1.css) `
				padding: 0 0 ${bottomPadding}px 0;
			`;
    }
}};

	${({ hasFullHeight = false, hasBottomPadding = true }) => (0, media_util_1.Larger)((0, react_1.css) `
			padding-bottom: ${hasFullHeight ? 0 : hasBottomPadding ? style_constants_1.LayoutSpacing.bottomMargin.pc : 0}px;
		`)}
`;
exports.FooterWrapper = styled_1.default.div `
	flex: none;
	width: 100%;

	padding: 0 20px 20px 20px;
`;
