import { getSizeStyles as t } from "../../utils/getSizeStyles/getSizeStyles.js";
import { getTypographyStyles as r } from "../../utils/getTypographyStyles.js";
import { DATE_RANGE_CALENDAR_PICKER_DAY_BUTTON_SIZE as c } from "./constants.js";
const u = {
  /** Define the responsive wrapper that sizes the visible calendar columns. */
  root: ({ theme: e, ownerState: i }) => {
    const a = "var(--M4LDateRangeCalendarPicker-calendar-width)", s = Math.max(i?.calendars ?? 1, 1), n = [
      ...Array.from({ length: s }, () => a),
      ...Array.from(
        { length: Math.max(s - 1, 0) },
        () => e.vars.size.baseSpacings.sp6
      )
    ];
    return {
      display: "inline-flex",
      flexDirection: "column",
      gap: e.vars.size.baseSpacings.sp3,
      alignItems: "center",
      minWidth: n.length === 1 ? a : `calc(${n.join(" + ")})`,
      width: i?.variant === "column" ? a : "fit-content"
    };
  },
  /** Arrange the visible month headers in the same grid as the calendar panels. */
  headers: ({ theme: e, ownerState: i }) => ({
    display: "grid",
    gap: e.vars.size.baseSpacings.sp6,
    gridTemplateColumns: `repeat(${i?.calendars ?? 1}, minmax(0, 1fr))`,
    width: "100%"
  }),
  /** Align the month navigation controls and title within a single header row. */
  header: ({ theme: e }) => ({
    alignItems: "center",
    display: "grid",
    gap: e.vars.size.baseSpacings.sp1,
    gridTemplateColumns: "auto 1fr auto"
  }),
  /** Keep the header navigation buttons aligned with the configured action size. */
  headerNavigationButton: ({ theme: e, ownerState: i }) => ({
    flex: "0 0 auto",
    ...t(
      e,
      i?.size ?? "medium",
      "action",
      (a) => ({
        minHeight: a,
        minWidth: a
      }),
      "width"
    )
  }),
  /** Style the clickable month label button that opens the year picker. */
  headerLabelButton: ({ theme: e, ownerState: i }) => ({
    alignItems: "center",
    borderRadius: e.vars.size.borderRadius["r1-5"],
    display: "inline-flex",
    justifyContent: "center",
    paddingInline: e.vars.size.baseSpacings.sp3,
    width: "100%",
    ...t(e, i?.size ?? "medium", "action", (a) => ({
      maxHeight: a,
      minHeight: a
    })),
    "&:hover": {
      backgroundColor: e.vars.palette.default.hoverOpacity
    },
    "&:active": {
      backgroundColor: e.vars.palette.default.active
    },
    "&:disabled": {
      cursor: "not-allowed",
      opacity: 0.64
    }
  }),
  /** Emphasize the current month label shown in each calendar header. */
  headerTitle: ({ theme: e, ownerState: i }) => ({
    color: e.vars.palette.text.primary,
    textTransform: "capitalize",
    fontFamily: 'Inter, "Segoe UI", Roboto, "Helvetica Neue", sans-serif, Open Sans',
    ...r(
      e.generalSettings.isMobile,
      i?.size ?? "medium",
      "bodyDens"
    ),
    lineHeight: "normal"
  }),
  /** Lay out the visible month panels with the shared inter-calendar gap. */
  calendar: ({ theme: e, ownerState: i }) => ({
    display: "grid",
    gap: e.vars.size.baseSpacings.sp6,
    gridTemplateColumns: `repeat(${i?.calendars ?? 1}, minmax(0, 1fr))`,
    width: "fit-content"
  }),
  /** Stack the weekday row and week grid for a single rendered month. */
  month: ({ theme: e }) => ({
    display: "flex",
    flexDirection: "column",
    gap: e.vars.size.baseSpacings.sp2,
    width: "fit-content"
  }),
  /** Render the seven weekday labels in a fixed calendar row. */
  weekdayRow: ({ theme: e }) => ({
    display: "grid",
    gap: e.vars.size.baseSpacings.sp2,
    gridTemplateColumns: "repeat(7, minmax(0, 1fr))",
    width: "100%"
  }),
  /** Apply the subdued weekday typography used above the day grid. */
  weekdayLabel: ({ theme: e, ownerState: i }) => ({
    alignItems: "center",
    color: e.vars.palette.text.secondary,
    display: "flex",
    justifyContent: "center",
    minHeight: e.vars.size.baseSpacings.sp6,
    textTransform: "capitalize",
    fontFamily: 'Inter, "Segoe UI", Roboto, "Helvetica Neue", sans-serif, Open Sans',
    ...r(
      e.generalSettings.isMobile,
      i?.size ?? "medium",
      "bodySlim"
    ),
    lineHeight: "normal"
  }),
  /** Stack each week row while preserving the shared vertical spacing. */
  weeks: ({ theme: e }) => ({
    display: "flex",
    flexDirection: "column",
    gap: e.vars.size.baseSpacings.sp1,
    width: "fit-content"
  }),
  /** Place the seven day cells of a week on a uniform grid. */
  week: ({ theme: e }) => ({
    display: "grid",
    gridTemplateColumns: "repeat(7, minmax(0, 1fr))",
    gap: e.vars.size.baseSpacings.sp2,
    justifyItems: "center"
  }),
  /** Draw the interactive day cell, including range preview and selection overlays. */
  dayButton: ({ theme: e, ownerState: i }) => {
    const a = !!i && (i.isWithinRange || i.isPreviewing), s = !!i && i.isPreviewing && !i.isWithinRange, n = `1px dashed ${e.vars.palette.default.activeOpacity}`, d = `1px solid ${e.vars.palette.primary.enabledOpacity}`, o = s ? n : d, l = `calc(${e.vars.size.baseSpacings.sp2} * -0.5)`;
    return {
      alignItems: "center",
      backgroundColor: "transparent",
      borderRadius: e.vars.size.borderRadius.r2,
      ...t(
        e,
        i?.size ?? "medium",
        "action",
        (p) => ({
          maxWidth: p,
          maxHeight: p
        })
      ),
      display: "inline-flex",
      height: c,
      isolation: "isolate",
      justifyContent: "center",
      overflow: "visible",
      position: "relative",
      transition: "background-color 0.1s ease, color 0.1s ease, box-shadow 0.1s ease",
      width: c,
      "&::before": a ? {
        backgroundColor: s ? e.vars.palette.default.enabledOpacity : e.vars.palette.primary.opacity,
        borderBottomLeftRadius: i?.isRangeStart ? e.vars.size.borderRadius.r2 : 0,
        borderBottomRightRadius: i?.isRangeEnd ? e.vars.size.borderRadius.r2 : 0,
        borderTopLeftRadius: i?.isRangeStart ? e.vars.size.borderRadius.r2 : 0,
        borderTopRightRadius: i?.isRangeEnd ? e.vars.size.borderRadius.r2 : 0,
        borderBottom: o,
        borderLeft: i?.isRangeStart ? o : "none",
        borderRight: i?.isRangeEnd ? o : "none",
        borderTop: o,
        boxSizing: "border-box",
        content: '""',
        insetBlock: 0,
        left: i?.isRangeStart ? 0 : l,
        pointerEvents: "none",
        position: "absolute",
        right: i?.isRangeEnd ? 0 : l,
        zIndex: 0
      } : {
        content: "none"
      },
      "&::after": i?.isSelected ? {
        backgroundColor: e.vars.palette.primary.enabled,
        border: d,
        borderRadius: e.vars.size.borderRadius.r2,
        boxSizing: "border-box",
        content: '""',
        inset: 0,
        pointerEvents: "none",
        position: "absolute",
        transition: "background-color 0.1s ease",
        zIndex: 1
      } : {
        content: "none"
      },
      "&:focus-visible": {
        boxShadow: `0 0 0 2px ${e.vars.palette.primary.focus}`,
        outline: "none"
      },
      "&:hover": i?.disabled ? void 0 : {
        ...i?.isSelected ? {
          "&::after": {
            backgroundColor: e.vars.palette.primary.hover
          }
        } : {
          backgroundColor: e.vars.palette.default.hoverOpacity
        }
      },
      "&:active": i?.disabled ? void 0 : {
        ...i?.isSelected ? {
          "&::after": {
            backgroundColor: e.vars.palette.primary.active
          }
        } : {
          backgroundColor: e.vars.palette.default.active
        }
      },
      "&:disabled": {
        cursor: "not-allowed"
      },
      ...i?.isToday && !i?.isSelected && !i?.disabled ? {
        boxShadow: `0 0 0 1px ${e.vars.palette.primary.enabled}`
      } : {},
      fontFamily: 'Inter, "Segoe UI", Roboto, "Helvetica Neue", sans-serif, Open Sans',
      ...r(
        e.generalSettings.isMobile,
        i?.size ?? "medium",
        "bodySlim"
      ),
      lineHeight: "normal"
    };
  },
  /** Style the day number so it stays readable above range and badge layers. */
  dayLabel: ({ theme: e, ownerState: i }) => ({
    fontFamily: 'Inter, "Segoe UI", Roboto, "Helvetica Neue", sans-serif, Open Sans',
    ...r(
      e.generalSettings.isMobile,
      i?.size ?? "medium",
      "bodySlim"
    ),
    color: i?.isSelected ? e.vars.palette.primary.contrastText : i?.disabled || i?.isOutsideCurrentMonth ? e.vars.palette.text.disabled : e.vars.palette.text.primary,
    lineHeight: "normal",
    position: "relative",
    zIndex: 2
  }),
  /** Anchor the optional badge or dot indicator to the top-right day corner. */
  dayBadge: ({ theme: e }) => {
    const i = e.vars.size.baseSpacings["sp0-5"], a = e.vars.size.baseSpacings["sp1-5"];
    return {
      alignItems: "center",
      display: "flex",
      height: "100%",
      justifyContent: "center",
      overflow: "visible",
      pointerEvents: "none",
      position: "absolute",
      inset: 0,
      width: "100%",
      zIndex: 2,
      "& .MuiBadge-badge": {
        pointerEvents: "none",
        right: 0,
        top: 0,
        zIndex: 3,
        "&.MuiBadge-dot": {
          height: a,
          minHeight: a,
          minWidth: a,
          right: i,
          top: i,
          width: a
        }
      }
    };
  },
  /** Skin the popover paper that hosts the inline year selection calendar. */
  yearPopover: ({ theme: e }) => ({
    "& .MuiPaper-root": {
      backgroundColor: e.vars.palette.background.default,
      borderRadius: e.vars.size.borderRadius.r2,
      boxShadow: e.vars.customShadows.z4,
      padding: e.vars.size.baseSpacings.sp3
    }
  }),
  /** Reformat the MUI year picker into the component's fixed compact grid. */
  yearCalendar: ({ theme: e, ownerState: i }) => ({
    "&&&": {
      width: "195px",
      rowGap: e.vars.size.baseSpacings.sp2,
      columnGap: e.vars.size.baseSpacings["sp1-5"],
      padding: "unset",
      "& .MuiPickersYear-root": {
        display: "flex",
        justifyContent: "center",
        width: "fit-content",
        maxWidth: "fit-content"
      },
      "& .MuiPickersYear-yearButton": {
        borderRadius: e.vars.size.borderRadius.r2,
        border: e.vars.size.borderStroke.container,
        borderColor: "transparent",
        margin: 0,
        width: "40px",
        paddingInline: "unset",
        ...t(
          e,
          i?.size ?? "medium",
          "action",
          (a) => ({
            minHeight: a
          })
        ),
        fontFamily: 'Inter, "Segoe UI", Roboto, "Helvetica Neue", sans-serif, Open Sans',
        ...r(
          e.generalSettings.isMobile,
          i?.size ?? "medium",
          "bodySlim"
        ),
        lineHeight: "normal",
        "&:hover": {
          backgroundColor: e.vars.palette.default.hoverOpacity
        },
        "&:active": {
          backgroundColor: e.vars.palette.default.active
        },
        "&.Mui-selected": {
          backgroundColor: e.vars.palette.primary.enabled,
          color: e.vars.palette.primary.contrastText,
          borderColor: `${e.vars.palette.primary.activeOpacity}!important`,
          "&:hover": {
            backgroundColor: e.vars.palette.primary.hover
          },
          "&:active": {
            backgroundColor: e.vars.palette.primary.active
          }
        }
      }
    }
  }),
  /** Preserve layout space when the picker renders its skeleton state. */
  skeleton: () => ({
    flexShrink: 0
  }),
  /** Lay out the optional start and end time fields under the selected range. */
  timeRange: ({ theme: e, ownerState: i }) => ({
    display: i?.variant === "column" ? "flex" : "grid",
    flexDirection: i?.variant === "column" ? "column" : void 0,
    gap: i?.variant === "column" ? e.vars.size.baseSpacings.sp3 : e.vars.size.baseSpacings.sp6,
    gridTemplateColumns: i?.variant === "column" ? void 0 : `repeat(${Math.min(i?.calendars ?? 2, 2)}, minmax(0, 1fr))`,
    minWidth: 0,
    width: "100%",
    paddingTop: i?.variant !== "column" ? e.vars.size.baseSpacings.sp1 : "unset"
  }),
  /** Stack the per-endpoint time label, summary, and field controls. */
  timeFieldGroup: ({ theme: e, ownerState: i }) => ({
    display: "flex",
    flexDirection: "column",
    gap: e.vars.size.baseSpacings.sp1,
    justifySelf: i?.variant === "column" ? void 0 : "stretch",
    minWidth: 0,
    width: "100%"
  }),
  /** Clamp long localized time summaries without breaking the column layout. */
  timeFieldSummary: ({ theme: e, ownerState: i }) => ({
    color: e.vars.palette.text.secondary,
    fontVariantNumeric: "tabular-nums",
    display: "-webkit-box",
    maxWidth: "100%",
    minWidth: 0,
    overflow: "hidden",
    overflowWrap: "anywhere",
    textOverflow: "ellipsis",
    WebkitBoxOrient: "vertical",
    WebkitLineClamp: 3,
    whiteSpace: "normal",
    wordBreak: "break-word",
    fontFamily: 'Inter, "Segoe UI", Roboto, "Helvetica Neue", sans-serif, Open Sans',
    ...r(
      e.generalSettings.isMobile,
      i?.size ?? "medium",
      "bodySlim"
    ),
    lineHeight: "normal"
  }),
  /**
   * Stretch the inline time picker to the column width owned by the calendar.
   */
  timePicker: ({ theme: e, ownerState: i }) => ({
    minWidth: 0,
    paddingTop: i?.variant === "column" ? "unset" : e.vars.size.baseSpacings.sp3,
    width: "100%"
  }),
  /** Constrain helper and validation text to the calendar column width. */
  helperError: ({ theme: e }) => ({
    display: "block",
    marginTop: e.vars.size.baseSpacings["sp0-5"],
    overflowWrap: "anywhere",
    whiteSpace: "normal",
    width: "100%"
  })
};
export {
  u as dateRangeCalendarPickerStyles
};
