import {
  Headline
} from "./chunk-QJEZ6WCN.js";
import {
  StyledSelect
} from "./chunk-DC6PYU2D.js";
import {
  TextInputHalfRow
} from "./chunk-H5MRGJQP.js";
import {
  ToggleContainer
} from "./chunk-JXEBM5BK.js";
import {
  StyledFileInput
} from "./chunk-AFZEU7OM.js";
import {
  formButtonTopMarginStyle,
  inputSpacingPx
} from "./chunk-FTMB6R72.js";
import {
  Checkbox
} from "./chunk-MJT4VLKE.js";
import {
  toReactNodesWithTypographyMap
} from "./chunk-EZI6E6UO.js";
import {
  toReactNodes
} from "./chunk-OYIPFTQC.js";
import {
  icon
} from "./chunk-FZUV52PP.js";
import {
  ClipboardTextField
} from "./chunk-ZOIGYYOQ.js";
import {
  StyledButtonRowButton
} from "./chunk-VHHLWRJS.js";
import {
  Spacing
} from "./chunk-E5DUKMCU.js";
import {
  pxToRems
} from "./chunk-FAWI3ZGU.js";
import {
  ButtonSelector
} from "./chunk-SIPHI6JZ.js";
import {
  LoadingWrapper
} from "./chunk-YNCTWF7N.js";
import {
  mcBold,
  standardBorderRadius,
  standardCardShadow,
  standardCardShadowHard,
  standardContentInset
} from "./chunk-HGZGGJQB.js";
import {
  Link
} from "./chunk-SWMGDTQN.js";
import {
  select
} from "./chunk-YMNSXZ5D.js";
import {
  getColor
} from "./chunk-VAH342U2.js";
import {
  bp
} from "./chunk-JSGRNWSB.js";
import {
  colors
} from "./chunk-MIIIUXV6.js";
import {
  __spreadProps,
  __spreadValues
} from "./chunk-W7FAWX6T.js";

// src/components/CardForm/CardForm.tsx
import { css, useTheme } from "@emotion/react";
import styled from "@emotion/styled";
import { Fragment, useCallback, useEffect, useMemo } from "react";
import { jsx, jsxs } from "@emotion/react/jsx-runtime";
function resolveProps(args, theme) {
  const paddingTop = resolveCardFormProp(
    args.paddingTop,
    args.kind,
    "paddingTop",
    theme
  );
  const paddingBottom = resolveCardFormProp(
    args.paddingBottom,
    args.kind,
    "paddingBottom",
    theme
  );
  const paddingX = resolveCardFormProp(
    args.paddingX,
    args.kind,
    "paddingX",
    theme
  );
  const textAlign = resolveCardFormProp(
    args.textAlign,
    args.kind,
    "textAlign",
    theme
  );
  const shadow = resolveCardFormProp(args.shadow, args.kind, "shadow", theme);
  const borderRadius = resolveCardFormProp(
    void 0,
    args.kind,
    "borderRadius",
    theme
  );
  const borderWidth = resolveCardFormProp(
    void 0,
    args.kind,
    "borderWidth",
    theme
  );
  const borderColor = resolveCardFormProp(
    void 0,
    args.kind,
    "borderColor",
    theme
  );
  const backgroundColor = resolveCardFormProp(
    void 0,
    args.kind,
    "backgroundColor",
    theme
  );
  const smBackgroundColor = resolveCardFormProp(
    void 0,
    args.kind,
    "smBackgroundColor",
    theme
  );
  const smBorderWidth = resolveCardFormProp(
    void 0,
    args.kind,
    "smBorderWidth",
    theme
  );
  const defaultDescriptionTypographyMap = resolveCardFormProp(
    void 0,
    args.kind,
    "defaultDescriptionTypographyMap",
    theme
  );
  const props = {
    paddingTop,
    paddingBottom,
    paddingX,
    shadow,
    borderRadius,
    borderColor,
    borderWidth,
    textAlign,
    backgroundColor,
    smBackgroundColor,
    smBorderWidth,
    defaultDescriptionTypographyMap
  };
  return props;
}
function CardForm({
  children,
  disabled,
  topContent = null,
  aboveHeaderContent,
  title,
  titleSize = "Large",
  titleMarginLeft,
  description,
  full = false,
  onSubmit,
  titleRightIcon,
  /* In some cases eg third party libs we can't avoid the need for child forms, so the
     top level element must be a div. Avoid using this prop generally except when necessary: */
  hasChildForm,
  wide = false,
  kind = "primary",
  shadow: shadowProp,
  textAlign: textAlignProp,
  paddingTop: paddingTopProp,
  paddingBottom: paddingBottomProp,
  paddingX: paddingXProp,
  belowFormContent,
  belowFormContentGap = 0,
  forceMarginAfterSubtitle = true,
  afterTitleMargin = 40,
  graphicHeader,
  statusHeaderProps,
  centeredContent = false,
  contentMarginTop,
  formButtonTopMargin,
  selectMarginTop,
  smDontAdjustWidth = false
}) {
  const theme = useTheme();
  const {
    paddingTop,
    paddingBottom,
    paddingX,
    shadow,
    borderRadius,
    borderWidth,
    borderColor,
    textAlign,
    backgroundColor,
    smBackgroundColor,
    smBorderWidth,
    defaultDescriptionTypographyMap
  } = resolveProps(
    {
      kind,
      textAlign: textAlignProp,
      shadow: shadowProp,
      paddingTop: paddingTopProp,
      paddingBottom: paddingBottomProp,
      paddingX: paddingXProp
    },
    theme
  );
  const onSubmitForm = useCallback(
    (e) => {
      e.preventDefault();
      if (disabled) {
        return;
      }
      if (onSubmit) {
        onSubmit(e);
      }
    },
    [onSubmit, disabled]
  );
  const formattedDescription = description ? toReactNodesWithTypographyMap(
    description,
    defaultDescriptionTypographyMap,
    false
  ) : null;
  const belowFormContentNodes = belowFormContent ? toReactNodes(belowFormContent) : null;
  const CardFormContentTarget = full ? CardFormContentFull : CardFormContent;
  const headerData = [
    aboveHeaderContent ? /* @__PURE__ */ jsx(Fragment, { children: aboveHeaderContent }, "card-form-above-header") : null,
    title ? /* @__PURE__ */ jsx(
      CardHeadline,
      {
        hasTopContent: Boolean(topContent),
        afterTitleMargin,
        contentMarginTop,
        titleMarginLeft,
        children: /* @__PURE__ */ jsx(
          Headline,
          {
            content: [
              title,
              ...titleRightIcon ? [icon({ name: titleRightIcon.name, ml: 4 })] : []
            ],
            display: "inline-flex",
            size: titleSize
          }
        )
      },
      "card-form-title"
    ) : null,
    formattedDescription ? /* @__PURE__ */ jsx(CardFormSubtitle, { children: formattedDescription }, "card-form-subtitle") : null
  ];
  const content = /* @__PURE__ */ jsxs(CardFormContentTarget, { children: [
    topContent,
    centeredContent ? /* @__PURE__ */ jsx(CenteredHeader, { children: headerData }) : headerData,
    children
  ] });
  const commonProps = {
    wide,
    shadow,
    borderRadius,
    borderWidth,
    borderColor,
    textAlign,
    paddingX,
    paddingTop,
    paddingBottom,
    backgroundColor,
    smBackgroundColor,
    smBorderWidth,
    forceMarginAfterSubtitle,
    smDontAdjustWidth
  };
  const Container = full ? CardFormContentFull : CardFormContainer;
  const statusHeader = useMemo(
    () => statusHeaderProps ? /* @__PURE__ */ jsx(StatusHeader, __spreadValues({}, statusHeaderProps)) : null,
    [statusHeaderProps]
  );
  useEffect(() => {
    var _a;
    (_a = document.querySelector("meta[name='theme-color']")) == null ? void 0 : _a.setAttribute("content", statusHeader ? theme.linkLight : theme.bg);
    return () => {
      var _a2;
      (_a2 = document.querySelector("meta[name='theme-color']")) == null ? void 0 : _a2.setAttribute("content", theme.bg);
    };
  }, [statusHeader, theme.linkLight, theme.bg]);
  return /* @__PURE__ */ jsxs(Container, { paddingBottom, children: [
    hasChildForm ? /* @__PURE__ */ jsx(StyledCardFormDiv, __spreadProps(__spreadValues({}, commonProps), { children: content })) : /* @__PURE__ */ jsxs(StyledCardFormContainer, { full, statusHeader: !!statusHeader, children: [
      statusHeader,
      graphicHeader && graphicHeader,
      /* @__PURE__ */ jsx(
        StyledCardForm,
        __spreadProps(__spreadValues({
          onSubmit: onSubmitForm,
          noValidate: true
        }, commonProps), {
          forceMarginAfterSubtitle,
          graphicHeader: !!graphicHeader,
          statusHeader: !!statusHeader,
          formButtonTopMargin,
          selectMarginTop,
          children: content
        })
      )
    ] }),
    belowFormContentNodes && /* @__PURE__ */ jsx(BelowCardFormContent, { gap: belowFormContentGap, children: belowFormContentNodes })
  ] });
}
var StatusHeader = ({ content, onClick }) => {
  return /* @__PURE__ */ jsx(StatusHeaderContainer, { onClick, children: toReactNodes(content) });
};
var StatusHeaderContainer = styled.div`
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  cursor: ${({ onClick }) => onClick ? "pointer" : "default"};
  gap: 2px;
  width: 100%;
  min-height: 49px;
  background-color: ${({ theme }) => theme.linkLight};
  padding: ${Spacing.px.xs} ${Spacing.px.lg};

  ${bp.minSm(`
    margin-bottom: ${Spacing.px.xs};
    width: fit-content;
    border-radius: 32px;
  `)}
`;
var StyledCardFormContainer = styled.div`
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: ${({ full }) => full ? "100%" : "auto"};
  background-color: ${({ statusHeader, theme }) => statusHeader ? theme.linkLight : theme.bg};
  ${bp.minSm(`
    background-color: #F9F9F9;
  `)}
`;
var CenteredHeader = styled.div`
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  height: 100%;
  justify-content: center;
`;
var CardFormContainer = styled.div`
  display: flex;
  flex-direction: column;
`;
var CardFormContent = styled.div`
  display: flex;
  flex-direction: column;
  align-self: center;
`;
var CardFormContentFull = styled.div`
  display: flex;
  flex-direction: column;
  align-self: center;
  height: 100%;
  padding-bottom: ${({ paddingBottom }) => paddingBottom != null ? paddingBottom : 0}px;
`;
var BelowCardFormContent = styled.div`
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: ${({ gap }) => gap}px;
  margin-top: ${Spacing.px.xl};
  margin-bottom: ${Spacing.px.xl};
`;
var CardFormSubtitle = styled.div`
  padding: 0 ${Spacing.px.xs};
`;
var CardFormButtonRow = styled.div`
  display: flex;
  justify-content: ${({ justify }) => (
  /* Default left */
  justify === "center" ? "center" : "left"
)};
  margin-top: 32px;
  ${ButtonSelector("* + ")} {
    margin-left: 10px;
  }

  &:not(:last-child) {
    margin-bottom: 32px;
  }
`;
var fieldLabelMarginPx = 12;
var CardFormFieldLabel = styled.label`
  display: block;
  margin-top: ${inputSpacingPx}px;
  color: ${({ theme }) => theme.text};
  font-size: ${pxToRems(14)};
  font-weight: 700;
  & + * {
    margin-top: ${fieldLabelMarginPx}px;
  }
`;
var CardFormNearButtonColumn = styled.div`
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: ${Spacing.px.sm};
`;
function CardFormDataFieldValue({ text }) {
  return /* @__PURE__ */ jsx(StyledCardFormDataFieldValue, { children: /* @__PURE__ */ jsx(ClipboardTextField, { value: text, icon: true, iconSide: "right" }) });
}
var StyledCardFormDataFieldValue = styled.div`
  margin-top: 4px;
  color: ${({ theme }) => theme.mcNeutral};
`;
var CardFormFullWidth = styled.div``;
var CardFormFullTopContent = styled.div`
  ${({ borderRadius = "16px 16px 0 0" }) => bp.minSm(`
    overflow: hidden;
    border-radius: ${borderRadius};
  `)}
`;
var StyledCardFormCheckboxParagraph = styled.div`
  display: flex;
  color: ${({ theme }) => theme.mcNeutral};
`;
var formInset = ({
  wide,
  paddingX,
  paddingTop,
  paddingBottom,
  smDontAdjustWidth,
  graphicHeader
}) => css`
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
  padding-right: ${paddingX}px;
  padding-left: ${paddingX}px;
  padding-top: ${paddingTop}px;
  padding-bottom: ${paddingBottom}px;

  ${bp.minSm(`
    width: ${wide ? 700 : 408}px;
  `)}

  ${graphicHeader || smDontAdjustWidth ? `width: 100%;` : standardContentInset.smCSS}

  & ${CardFormFullWidth}, & ${CardFormFullTopContent} {
    ${smDontAdjustWidth ? "" : bp.sm(`
      padding-right: ${standardContentInset.smPx}px;
      padding-left: ${standardContentInset.smPx}px;
      margin-left: -${standardContentInset.smPx}px;
    `)}

    ${smDontAdjustWidth ? "" : bp.minSm(`
      padding-right: ${paddingX}px;
      padding-left: ${paddingX}px;
      margin-left: -${paddingX}px;
    `)}
  }

  & ${CardFormFullTopContent} {
    ${bp.minSm(`
      margin-top: -${paddingTop}px;
    `)}
  }
`;
var StyledCardFormStyle = ({
  theme,
  wide,
  shadow,
  borderRadius,
  borderWidth,
  borderColor,
  textAlign,
  paddingX,
  paddingTop,
  paddingBottom,
  backgroundColor,
  smBackgroundColor,
  smBorderWidth,
  forceMarginAfterSubtitle = true,
  graphicHeader,
  statusHeader,
  formButtonTopMargin = 32,
  selectMarginTop = inputSpacingPx,
  smDontAdjustWidth = false
}) => {
  return css`
    ${graphicHeader ? formInset({
    wide,
    paddingX,
    paddingTop,
    paddingBottom,
    graphicHeader,
    smDontAdjustWidth
  }) : formInset({
    wide,
    paddingX,
    paddingTop,
    paddingBottom,
    smDontAdjustWidth
  })}

    ${shadow === "soft" ? standardCardShadow : shadow === "hard" ? standardCardShadowHard : ""}

    position: relative;
    height: 100%;
    border-style: solid;
    border-width: ${borderWidth}px;
    border-color: ${getColor(theme, borderColor)};
    background-color: ${getColor(theme, backgroundColor)};

    ${bp.sm(`
      box-shadow: none;
      background-color: ${getColor(theme, smBackgroundColor)};
      border-width: ${smBorderWidth}px;
      border-radius: ${statusHeader ? `${borderRadius}px ${borderRadius}px 0 0` : 0};
      ${statusHeader ? `box-shadow: 0 -0.5px 0 0px ${getColor(theme, borderColor)};` : ""}
    `)}

    ${bp.minSm(`
      border-radius: ${graphicHeader ? `0 0 ${borderRadius}px ${borderRadius}px` : `${borderRadius}px`};
    `)}

    ${CardHeadline}, ${CardFormSubtitle} {
      text-align: ${textAlign};
    }

    ${forceMarginAfterSubtitle ? `${CardFormSubtitle.toString()} + * {
      margin-top: 40px !important;
    }` : ""}

    ${CardFormButtonRow}, ${StyledButtonRowButton} {
      ${ButtonSelector()} {
        margin-top: 0;
      }
    }

    ${StyledSelect}, ${ToggleContainer} {
      margin-top: ${selectMarginTop}px;
    }

    ${CardFormFieldLabel} {
      margin-top: ${inputSpacingPx}px;

      & + ${StyledSelect} {
        margin-top: ${fieldLabelMarginPx}px;
      }
    }

    ${TextInputHalfRow} > ${StyledSelect} {
      margin-top: 0;
    }

    ${LoadingWrapper} {
      margin: 32px 0;
      * + * {
        margin-top: 0;
      }
    }

    ${ButtonSelector()} ${LoadingWrapper} {
      margin: 0;
    }

    ${StyledFileInput} {
      margin-top: 16px;
    }

    ${CardFormContent} {
      & > ${StyledCardFormCheckboxParagraph} {
        margin-top: 24px;
      }

      & > ${ButtonSelector()}, & > ${select(CardFormNearButtonColumn)} {
        ${formButtonTopMargin !== void 0 ? `margin-top: ${formButtonTopMargin}px;` : formButtonTopMarginStyle}
      }
    }
  `;
};
var StyledCardForm = styled.form(StyledCardFormStyle);
var StyledCardFormDiv = styled.div(StyledCardFormStyle);
var CardHeadline = styled.div`
  padding: 0 ${Spacing.px.xs};

  ${({ hasTopContent, contentMarginTop }) => hasTopContent || contentMarginTop !== void 0 ? `margin-top: ${contentMarginTop != null ? contentMarginTop : 32}px;` : ""}

  & + *:not(${CardFormSubtitle.toString()}) {
    margin-top: ${({ afterTitleMargin }) => afterTitleMargin}px;
  }

  & + ${CardFormSubtitle} {
    margin-top: 12px;
  }

  ${({ titleMarginLeft }) => titleMarginLeft !== void 0 && `margin-left: ${titleMarginLeft}px;`}
`;
function CardFormTextWithLink({
  text,
  toText,
  to
}) {
  return /* @__PURE__ */ jsxs("div", { css: { marginTop: "16px", fontWeight: "600" }, children: [
    /* @__PURE__ */ jsx("span", { css: mcBold, children: text }),
    " ",
    /* @__PURE__ */ jsx(Link, { to, children: toText })
  ] });
}
function CardFormCheckboxParagraph({
  children,
  onChange,
  checked
}) {
  return /* @__PURE__ */ jsxs(StyledCardFormCheckboxParagraph, { children: [
    /* @__PURE__ */ jsx(Checkbox, { checked, onChange, alignItems: "flex-start" }),
    /* @__PURE__ */ jsx(CardFormCheckboxParagraphText, { onClick: () => onChange(!checked), children })
  ] });
}
var CardFormCheckboxParagraphText = styled.span`
  margin-left: 12px;
  max-width: 350px;
  cursor: pointer;
`;
var CardFormOption = ({
  label,
  description,
  onClick,
  selected = false
}) => /* @__PURE__ */ jsxs(StyledCardFormOption, { onClick, selected, children: [
  /* @__PURE__ */ jsx(CardFormOptionLabel, { children: label }),
  description ? /* @__PURE__ */ jsx(CardFormOptionDescription, { children: description }) : null
] });
var StyledCardFormOption = styled.div`
  border: ${({ theme, selected }) => `${selected ? `2px solid ${theme.info}` : `1px solid ${theme.c1Neutral}`}`};
  ${standardBorderRadius(8)}
  cursor: pointer;
  margin-top: 10px;
  padding: ${({ selected }) => selected ? "15px" : "16px"};
`;
var CardFormOptionLabel = styled.div`
  font-weight: bold;
`;
var CardFormOptionDescription = styled.p`
  color: ${colors.gray40};
  margin: 6px 0 0;
`;
function resolveCardFormProp(prop, kind, defaultKey, theme) {
  var _a;
  return (
    /** props may be unset for a given kind but theme defaults always exist,
     * so this will always resolve a value: */
    prop !== void 0 ? prop : ((_a = theme.cardForm.kinds[kind]) == null ? void 0 : _a[defaultKey]) || theme.cardForm[defaultKey]
  );
}

export {
  CardForm,
  CardFormButtonRow,
  CardFormFieldLabel,
  CardFormNearButtonColumn,
  CardFormDataFieldValue,
  CardFormFullWidth,
  CardFormFullTopContent,
  CardFormTextWithLink,
  CardFormCheckboxParagraph,
  CardFormOption
};
