import {
  pageSectionScrollOffset
} from "./chunk-JJC2AUQ3.js";
import {
  TextButton
} from "./chunk-3EC5GIFU.js";
import {
  Dropdown
} from "./chunk-C4X6HNCA.js";
import {
  standardBorderColor
} from "./chunk-FTMB6R72.js";
import {
  Badge,
  badgeSmVPadding
} from "./chunk-UYK4J3ZE.js";
import {
  toReactNodes
} from "./chunk-OYIPFTQC.js";
import {
  Heading,
  headingWithDefaults
} from "./chunk-XZD67M3O.js";
import {
  Loading
} from "./chunk-YNCTWF7N.js";
import {
  UnstyledButton
} from "./chunk-5NUOBJXP.js";
import {
  Icon
} from "./chunk-DMPXNHDT.js";
import {
  standardBorderRadius,
  standardLineHeightEms
} from "./chunk-HGZGGJQB.js";
import {
  select
} from "./chunk-YMNSXZ5D.js";
import {
  bp
} from "./chunk-JSGRNWSB.js";
import {
  colors
} from "./chunk-MIIIUXV6.js";
import {
  __spreadValues
} from "./chunk-W7FAWX6T.js";

// src/components/PageSection/PageSection.tsx
import { useTheme } from "@emotion/react";
import styled from "@emotion/styled";
import { Fragment } from "react";
import { jsx, jsxs } from "@emotion/react/jsx-runtime";
function PageSection({
  children,
  title,
  sectionId,
  headerOffset = 0
}) {
  return /* @__PURE__ */ jsxs(StyledPageSection, { scrollMarginTop: headerOffset + pageSectionScrollOffset, children: [
    title ? /* @__PURE__ */ jsx(Heading, { type: "h3", id: sectionId, mt: 0, mb: 40, children: title }) : null,
    children
  ] });
}
var StyledPageSection = styled.div`
  &:first-of-type {
    ${bp.minSm(`
      margin-top: 4px;
    `)}
  }

  &:not(:first-of-type) {
    margin-top: 72px;
  }

  h3,
  h4 {
    scroll-margin-top: ${({ scrollMarginTop }) => scrollMarginTop}px !important;
  }
`;
var PageSectionSubheading = headingWithDefaults({
  type: "h4",
  mb: 32
});
var PageSectionBoxActionColumn = ({
  label,
  value,
  valueId
}) => /* @__PURE__ */ jsxs(StyledPageSectionBoxActionColumn, { children: [
  /* @__PURE__ */ jsx(PageSectionBoxActionColumnLabel, { children: label }),
  value ? /* @__PURE__ */ jsx(PageSectionBoxActionColumnValue, { id: valueId, children: value }) : /* @__PURE__ */ jsx(PageSectionBoxActionColumnNoValue, { children: "Unknown" })
] });
var StyledPageSectionBoxActionColumn = styled.div``;
var PageSectionBoxActionColumnLabel = styled.div`
  color: ${colors.gray40};
  font-weight: 500;
  margin: 0;
`;
var PageSectionBoxActionColumnValue = styled.div`
  font-weight: 700;
  margin-bottom: 0;
  margin-top: 6px;
  overflow: hidden;
  text-overflow: ellipsis;
`;
var PageSectionBoxActionColumnNoValue = styled(
  PageSectionBoxActionColumnValue
)`
  color: ${colors.gray80};
  font-style: italic;
`;
function PageSectionBoxAction({
  dropdownItems,
  icon,
  isDelete = false,
  label,
  loading = false,
  onClick,
  to,
  toParams
}) {
  const theme = useTheme();
  return loading ? /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Loading, { size: 12, center: false }) }) : icon ? /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(UnstyledButton, { onClick: icon.onClick, children: /* @__PURE__ */ jsx(Icon, { name: icon.name, width: 12, color: "mcNeutral" }) }) }) : dropdownItems ? /* @__PURE__ */ jsx(
    Dropdown,
    {
      button: {
        getContent: () => /* @__PURE__ */ jsx(Icon, { name: "DotGrid1x3Horizontal", width: 16 })
      },
      dropdownItems
    }
  ) : isDelete ? /* @__PURE__ */ jsx(UnstyledButton, { css: { color: theme.mcNeutral }, onClick, children: "Delete" }) : label ? (
    /* Extra div for proper default alignment inside flex contexts */
    /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
      TextButton,
      {
        leftIcon: icon,
        text: label,
        to,
        toParams,
        onClick
      }
    ) })
  ) : null;
}
var PageSectionBoxActionRow = ({
  title,
  titleBadge,
  titleBadgeKind = "default",
  titleRightContent,
  description,
  separator,
  children,
  action,
  smFlexColumn = true
}) => {
  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(
    SPageSectionBoxActionRow,
    {
      separator: Boolean(separator),
      smFlexColumn: Boolean(smFlexColumn),
      children: [
        title ? /* @__PURE__ */ jsxs("div", { css: { flex: 1 }, children: [
          /* @__PURE__ */ jsxs(PageSectionBoxTitle, { children: [
            /* @__PURE__ */ jsxs("div", { children: [
              title,
              titleBadge ? /* @__PURE__ */ jsx(Badge, { content: titleBadge, ml: 4, kind: titleBadgeKind }) : null
            ] }),
            titleRightContent
          ] }),
          description ? /* @__PURE__ */ jsx(PageSectionBoxDescription, { children: description }) : null
        ] }) : null,
        children,
        /* @__PURE__ */ jsx(PageSectionBoxAction, __spreadValues({}, action))
      ]
    }
  ) });
};
var SPageSectionBoxActionRow = styled.div`
  display: flex;
  gap: 12px;
  align-items: top;
  flex-direction: row;
  justify-content: space-between;

  & + & {
    margin-top: 32px;
  }

  ${({ smFlexColumn }) => smFlexColumn ? bp.sm(`flex-direction: column;`) : ""}

  &:has(> ${StyledPageSectionBoxActionColumn}) {
    ${select(StyledPageSectionBoxActionColumn)} {
      width: 150px;
    }
    ${bp.maxMd(`
      ${select(StyledPageSectionBoxActionColumn)} {
        width: auto;
      }
    `)}
  }

  ${({ separator, theme }) => separator && `
      border-top: 1px solid;
      ${standardBorderColor({ theme }).styles};
      padding-top: 32px;
    `}
`;
var PageSectionBoxColumn = styled.div``;
var PageSectionBoxRow = styled.div`
  display: grid;
  grid-template-columns: repeat(
    auto-fit,
    minmax(215px, 1fr)
  ); /* This creates as many columns as can fit, each at least 150px wide */
`;
function PageSectionBox({
  action,
  description,
  children
}) {
  return /* @__PURE__ */ jsxs(StyledPageSectionBox, { children: [
    description && /* @__PURE__ */ jsx(PageSectionBoxDescription, { children: toReactNodes(description) }),
    children,
    (action == null ? void 0 : action.label) ? /* @__PURE__ */ jsx("div", { css: { marginTop: "12px" }, children: /* @__PURE__ */ jsx(PageSectionBoxAction, __spreadValues({}, action)) }) : null
  ] });
}
var StyledPageSectionBox = styled.div`
  & + & {
    margin-top: 32px;
  }

  & > ${PageSectionBoxRow}, & {
    border: 1px solid;
    ${standardBorderColor}
  }

  ${standardBorderRadius(8)}
  padding: 16px;

  /* PageSectionBoxRow and PageSectionBoxColumn manage their own borders: */
  &:has(> ${PageSectionBoxRow}) {
    border: none;
    padding: 0;
    ${standardBorderRadius(0)}
  }

  & > ${PageSectionBoxRow} {
    &:first-of-type {
      ${standardBorderRadius([12, 12, 0, 0])}
    }

    &:last-of-type {
      ${standardBorderRadius([0, 0, 12, 12])}
    }

    &:only-of-type {
      ${standardBorderRadius(12)}
    }

    &:not(:last-of-type) {
      border-bottom: 0;
    }

    ${PageSectionBoxColumn} {
      padding: 32px;
      ${bp.sm(`padding: 16px;`)}
      &:not(:first-of-type) {
        border-left: solid 1px;
        ${standardBorderColor}
      }
    }

    ${({ theme }) => bp.maxMd(`
        grid-template-columns: none;
        ${select(PageSectionBoxColumn)} {
          &:not(:first-of-type) {
            border-left: 0 !important;
            border-top: solid 1px;
            ${standardBorderColor({ theme }).styles};
          }
        }
      `)}
  }
`;
var PageSectionBoxTitle = styled.div`
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: space-between;
  font-size: ${({ lg }) => lg ? 14 : 12}px;
  font-weight: 600;
  line-height: ${({ lg }) => standardLineHeightEms * (lg ? 14 : 12) + badgeSmVPadding * 2}px;
`;
var PageSectionBoxDescription = styled.div`
  color: ${({ theme }) => theme.mcNeutral};
  ${PageSectionBoxTitle} + & {
    margin-top: 6px;
  }
`;
var gapPx = 24;
var PageSectionRow = styled.div`
  display: flex;
  flex-direction: column;
  gap: ${gapPx}px;

  ${bp.minSm(`
    flex-direction: row;
  `)}

  margin-top: 40px;
  &:first-of-type {
    margin-top: 0;
  }
`;
var PageSectionRowSubSection = styled.div`
  box-sizing: border-box;
  width: 100%;

  &:first-of-type {
    margin-right: 0px;
  }

  &:last-of-type {
    margin-left: 0px;
    margin-top: ${gapPx}px;
  }

  ${StyledPageSectionBox} + ${StyledPageSectionBox} {
    /* Less margin for boxes within a single SubSection: */
    margin-top: 16px;
  }

  ${bp.minSm(`
    width: calc(50% - ${gapPx / 2}px);

    &:last-of-type {
      margin-top: 0;
    }
  `)}

  ${({ fullWidth }) => fullWidth ? "width: 100% !important;" : ""}
`;

export {
  PageSection,
  PageSectionSubheading,
  PageSectionBoxActionColumn,
  PageSectionBoxActionRow,
  PageSectionBoxColumn,
  PageSectionBoxRow,
  PageSectionBox,
  StyledPageSectionBox,
  PageSectionBoxTitle,
  PageSectionBoxDescription,
  PageSectionRow,
  PageSectionRowSubSection
};
