"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.InformationIconWrapper = exports.TooltipButtonWrapper = exports.StickBottomWrapper = exports.ContentsVerticalPadding = exports.ContentsPadding = exports.ATagButton = exports.ButtonWrapperInPc = exports.MarginBottomHasFooter = exports.MarginBottomNoFooter = exports.MarginTopHasHeader = exports.MarginTopNoHeader = exports.ImgBase = exports.CenterBody = exports.SidePaddingBody = exports.defaultLRPadding = exports.PureLayoutBase = exports.BasicLayoutBase = void 0;
const react_1 = require("@emotion/react");
const styled_1 = __importDefault(require("@emotion/styled"));
const core_1 = require("../../core");
const index_constant_1 = require("../GNB/index.constant");
const utils_1 = require("../../utils");
/* ==================== Layout, Wrapper ==================== */
const getFullHeightStyle = (deletePx = 0) => (0, react_1.css) `
	height: calc(100vh - ${deletePx}px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
	height: calc(100vh - ${deletePx}px - constant(safe-area-inset-top) - constant(safe-area-inset-bottom));
`;
exports.BasicLayoutBase = {
    ParentWrapper: styled_1.default.div `
		${({ hasGlobalLayoutHeader }) => hasGlobalLayoutHeader ? getFullHeightStyle(index_constant_1.GNB_HEIGHT.mobile) : getFullHeightStyle()}

		${({ bodyCenterizing }) => !bodyCenterizing &&
        (0, react_1.css) `
				height: inherit;
			`}

		${(0, utils_1.Larger)((0, react_1.css) `
			/* scroll 생기기 전에는 sticky > relative 로 자리차지 */
			height: initial;
			padding: 80px 0;
		`)};
	`,
    ChildrenWrapper: styled_1.default.div `
		width: 100%;
		/* <Card /> spec 에서 disabled, click 등의 속성 없앰 */

		box-sizing: border-box;
		background-color: ${core_1.basicColors.white};
		border-radius: 20px;

		/* [flex] stretch component 를 위해 우선 적용 */
		${({ bodyCenterizing }) => bodyCenterizing &&
        (0, react_1.css) `
				display: flex;
				flex-direction: column;
				height: 100%;
			`}

		${(0, utils_1.Larger)((0, react_1.css) `
			width: 600px;
			margin: 0 auto;
			border-radius: 20px;
			box-shadow: 0px 6px 14px rgba(0, 0, 0, 0.04);

			/* [flex] 초기화 */
			flex: initial;
			/*  bodyCenterizing 초기화 */
			height: initial;
		`)}
	`,
    Header: styled_1.default.div ``,
    Body: styled_1.default.div ``,
    Footer: styled_1.default.div ``,
};
exports.PureLayoutBase = {
    ParentWrapper: styled_1.default.div `
		${getFullHeightStyle()}
	`,
    VerticalHorizontalCenterBody: styled_1.default.div `
		${getFullHeightStyle()}

		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	`,
};
/* ==================== Body ==================== */
exports.defaultLRPadding = {
    larger: 80,
    smaller: 20,
};
exports.SidePaddingBody = (0, styled_1.default)(exports.BasicLayoutBase.Body) `
	padding: 0 ${exports.defaultLRPadding.smaller}px;

	${(0, utils_1.Larger)((0, react_1.css) `
		padding: 0 ${exports.defaultLRPadding.larger}px;
	`)};
`;
exports.CenterBody = (0, styled_1.default)(exports.BasicLayoutBase.Body) `
	/* 주의사항 : BasicLayout.props bodyCenterizing={true} 를 넘겨줘야합니다 */
	/* 세로 - full 차지 */
	flex-grow: 1;

	/* 박스 내 가로/세로 중앙 */
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
`;
exports.ImgBase = styled_1.default.img `
	width: ${({ width }) => width}px;
	height: ${({ height }) => height}px;
`;
/* ==================== Footer ==================== */
const MARGIN_TOP_NO_HEADER_IN_MOBILE = 25;
exports.MarginTopNoHeader = styled_1.default.div `
	width: 100%;
	height: ${MARGIN_TOP_NO_HEADER_IN_MOBILE}px; /** TODO: 임시, 정확한 수치 찾기 */

	${(0, utils_1.Larger)((0, react_1.css) `
		height: 80px;
	`)}
`;
exports.MarginTopHasHeader = styled_1.default.div `
	width: 100%;
	height: ${index_constant_1.GNB_HEIGHT.mobile}px;

	${(0, utils_1.Larger)((0, react_1.css) `
		height: ${index_constant_1.GNB_HEIGHT.pc}px;
	`)}
`;
exports.MarginBottomNoFooter = styled_1.default.div `
	width: 100%;
	min-height: 80px; /* Body = flex-grow 에 대응하기위해 단순 height 로는 안됨 */

	/** pc, mobile 공통 */
`;
exports.MarginBottomHasFooter = styled_1.default.div `
	width: 100%;
	height: 150px;

	${({ backgroundColor }) => backgroundColor && `background-color:${backgroundColor}`};

	${(0, utils_1.Larger)((0, react_1.css) `
		width: auto;
		height: auto;
	`)}
`;
//StickBottomWrapper 랑 정리 필요
exports.ButtonWrapperInPc = styled_1.default.div `
	padding: 60px ${exports.defaultLRPadding.larger}px 80px;

	display: flex;
	flex-direction: column;
	align-items: center;
`;
exports.ATagButton = styled_1.default.a `
	color: transparent;
	text-decoration: none;
	width: 100%;
`;
exports.ContentsPadding = styled_1.default.div `
	padding: 0 ${exports.defaultLRPadding.smaller}px;

	${(0, utils_1.Larger)((0, react_1.css) `
		padding: 0 ${exports.defaultLRPadding.larger}px;
	`)}
`;
exports.ContentsVerticalPadding = styled_1.default.div `
	height: 15px;

	${(0, utils_1.Larger)((0, react_1.css) `
		height: 60px;
	`)}
`;
exports.StickBottomWrapper = styled_1.default.div `
	width: 100%;

	display: flex;
	flex-direction: column;
	align-items: center;

	padding: 0 ${exports.defaultLRPadding.smaller}px;
	position: fixed;
	bottom: 20px;

	${(0, utils_1.Larger)((0, react_1.css) `
		padding: 60px ${exports.defaultLRPadding.larger}px 80px;
		position: static;
	`)}
`;
exports.TooltipButtonWrapper = styled_1.default.div `
	.tippy-content {
		background-color: ${core_1.basicColors.gray900};
		color: ${core_1.basicColors.white};
	}
	.tippy-arrow:before {
		border-top-color: ${core_1.basicColors.gray900} !important;
	}

	width: 100%;
`;
exports.InformationIconWrapper = styled_1.default.div `
	display: flex;
	justify-content: center;
	align-items: center;
`;
