import {
  Heading
} from "./chunk-P3EUPXFA.js";
import {
  ButtonRowContainer
} from "./chunk-NFSAJ5GJ.js";
import {
  z
} from "./chunk-55OQPFLF.js";
import {
  flexCenter,
  overflowAutoWithoutScrollbars,
  size
} from "./chunk-FCZJILMW.js";
import {
  cardBorderRadiusPx,
  darkGradientBg,
  headingContentMarginPx,
  standardBorderRadius,
  standardCardShadow,
  standardContentInset
} from "./chunk-JK4BP73A.js";
import {
  themeOr
} from "./chunk-2VBDEO6M.js";
import {
  bp,
  useBreakpoints
} from "./chunk-JSGRNWSB.js";

// src/components/CardPage.tsx
import styled from "@emotion/styled";
import { Fragment, useEffect, useRef, useState } from "react";
import { jsx, jsxs } from "@emotion/react/jsx-runtime";
function CardPage(props) {
  const initiallyExpanded = useRef(Boolean(props.expandRight));
  const [wasExpanded, setWasExpanded] = useState(Boolean(props.expandRight));
  const bp2 = useBreakpoints();
  const header = props.title ? /* @__PURE__ */ jsx(CardPageHeader, { children: /* @__PURE__ */ jsx(Heading, { type: "h1", m0: true, children: props.title }) }) : null;
  useEffect(() => {
    if (props.expandRight) {
      setWasExpanded(true);
    }
  }, [props.expandRight]);
  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(
    CardPageContainer,
    {
      id: props.id,
      bp: bp2,
      hasRightContent: Boolean(props.rightContent),
      wasExpanded,
      expandRight: Boolean(props.expandRight),
      minContentHeight: props.minContentHeight,
      initiallyExpanded: initiallyExpanded.current,
      children: [
        /* @__PURE__ */ jsx("div", { css: props.minContentWidth ? overflowAutoWithoutScrollbars : null, children: /* @__PURE__ */ jsxs(
          CardPageContent,
          {
            hasPreHeaderContent: Boolean(props.preHeaderContent),
            minContentHeight: props.minContentHeight,
            maxContentWidth: props.maxContentWidth,
            children: [
              props.preHeaderContent,
              header,
              props.children
            ]
          }
        ) }),
        props.rightContent && /* @__PURE__ */ jsx(CardPageRightContent, { children: /* @__PURE__ */ jsx(
          CardPageRightContentInner,
          {
            hasRightContent: Boolean(props.rightContent),
            children: props.rightContent
          }
        ) })
      ]
    }
  ) });
}
CardPage.defaultProps = {
  minContentHeight: void 0,
  minContentWidth: void 0,
  maxContentWidth: void 0
};
var CardPageFullContent = styled.div``;
var CardPageFullWidth = styled.div``;
var CardPageRightContentInner = styled.div`
  ${flexCenter}
  height: 100%;
  padding: 150px 25px;
  ${({ hasRightContent }) => hasRightContent && `justify-content: space-evenly;`}
`;
var CardPageRightContent = styled.div`
  display: flex;
  position: relative;
  ${CardPageRightContentInner} {
    ${darkGradientBg};
    position: relative;
    height: calc(100% + 80px);
    margin-top: -40px;
    margin-bottom: -40px;
    margin-right: -40px;
    overflow: hidden;
    width: 100%;

    ${bp.minSm(`
      ${standardBorderRadius([0, cardBorderRadiusPx, cardBorderRadiusPx, 0])};
    `)}
  }
`;
var vCardPaddingPx = 40;
var expandTiming = `0.65s ease-in-out`;
var CardPageContainer = styled.div`
  ${standardContentInset.css}
  ${({ theme }) => themeOr(`background-color: ${theme.bg}`, "transparent")({ theme })};
  position: relative;
  z-index: ${z.card};

  ${({ minContentHeight }) => `
    min-height: ${minContentHeight !== void 0 && minContentHeight !== null ? `${minContentHeight}px` : "250px"};
  `}

  ${bp.sm(`
    width: 100% !important;
  `)}

  & > * {
    ${standardContentInset.css}
  }

  & ${CardPageFullContent}, & ${CardPageFullWidth} {
    ${bp.sm(`
      width: calc(100% + ${standardContentInset.smPx * 2}px);
      margin-left: -${standardContentInset.smPx}px;
    `)}

    ${bp.minSmMaxLg(`
      width: calc(100% + ${standardContentInset.minSmMaxLgPx * 2}px);
      margin-left: -${standardContentInset.minSmMaxLgPx}px;
    `)}

    ${bp.lg(`
      width: calc(100% + ${standardContentInset.lgPx * 2}px);
      margin-left: -${standardContentInset.lgPx}px;
    `)}
  }

  & ${CardPageFullContent} {
    & > * {
      padding-top: ${vCardPaddingPx}px;
      padding-bottom: ${vCardPaddingPx}px;
      ${bp.sm(`
        padding-top: 0;
        padding-bottom: 0;
      `)}
    }

    margin-top: -${vCardPaddingPx}px;
    ${bp.sm(`margin-top: 0;`)}
  }

  ${bp.minSm(`
    ${standardCardShadow.styles};
    padding: ${vCardPaddingPx}px 0;
    ${standardBorderRadius(cardBorderRadiusPx)}
  `)}

  &:not(:last-child) {
    margin-bottom: 30px;
  }

  @keyframes rightSideExpand {
    0% {
      width: 50%;
    }
    100% {
      width: 100%;
    }
  }

  @keyframes rightSideCollapse {
    0% {
      width: 100%;
    }
    100% {
      width: 50%;
    }
  }

  @keyframes leftSideCollapse {
    0% {
      width: 50%;
      height: auto;
      opacity: 1;
    }
    30% {
      opacity: 0;
    }
    100% {
      height: 0px;
      width: 0%;
    }
  }

  @keyframes leftSideExpand {
    0% {
      width: 0%;
      opacity: 0;
    }
    50% {
      opacity: 0;
    }
    100% {
      width: 50%;
      opacity: 1;
    }
  }

  ${({ hasRightContent }) => hasRightContent && `
    display: flex;
    & > * {
      width: 50%;
      ${bp.sm(`width: 100%;`)}

      &:first-of-type > * {
        ${bp.minSmMaxLg(`
          width: calc(100% - ${standardContentInset.minSmMaxLgPx * 2}px);
          margin-left: ${standardContentInset.minSmMaxLgPx}px;
        `)}
        ${bp.lg(`
          width: calc(100% - ${standardContentInset.lgPx * 3}px);
          margin-left: ${standardContentInset.lgPx}px;
        `)}
      }
    }
  `}

  & > :not(${CardPageRightContent}) {
    ${({ expandRight, wasExpanded, initiallyExpanded }) => expandRight && wasExpanded ? bp.minSm(`
            width: 0%;
            height: 0px;
            ${initiallyExpanded ? "" : `animation: leftSideCollapse ${expandTiming};`}
            overflow: hidden;
            margin: 0%;
            opacity: 0;
          `) : wasExpanded ? bp.minSm(`
            width: 50%;
            animation: leftSideExpand ${expandTiming};
          `) : ""}
  }

  & > ${CardPageRightContent} {
    ${({ expandRight, wasExpanded, initiallyExpanded }) => expandRight && wasExpanded ? bp.minSm(`
            width: 100%;
            ${initiallyExpanded ? "" : `animation: rightSideExpand ${expandTiming};`}
            margin: 0%;
            & > ${CardPageRightContentInner.toString()} {
              border-radius: ${cardBorderRadiusPx}px !important;
            }
          `) : wasExpanded ? bp.minSm(`
            width: 50%;
            animation: rightSideCollapse ${expandTiming};
          `) : ""}
  }
`;
var CardPageSubtitle = styled.p`
  color: ${({ theme }) => theme.mcNeutral};
  font-size: ${size.px14};
  line-height: ${size.px18};
  font-weight: 600;
  margin: 0;
`;
var CardPageHeader = styled.div`
  align-items: center;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  position: relative;

  & + *:not(${CardPageSubtitle}):not(${ButtonRowContainer}) {
    margin-top: ${headingContentMarginPx}px !important;
  }

  & + ${CardPageSubtitle} {
    margin-top: 5px;
  }

  & + ${ButtonRowContainer} {
    margin-top: 16px;
  }
`;
var CardPageContent = styled.div`
  ${({
  maxContentWidth,
  minContentHeight,
  minContentWidth,
  hasPreHeaderContent
}) => `
    max-width: ${maxContentWidth ? `${maxContentWidth}px` : "initial"};
    min-width: ${minContentWidth ? `${minContentWidth}px` : "initial"};
    ${CardPageHeader.toString()} {
      margin-top: ${hasPreHeaderContent ? "25px" : "0"};
    }
    min-height: ${minContentHeight !== void 0 && minContentHeight !== null ? `${minContentHeight}px` : "400px"};
  `}
`;

export {
  CardPage,
  CardPageFullContent,
  CardPageFullWidth,
  CardPageRightContentInner,
  CardPageSubtitle,
  CardPageContent
};
