import { extractStylePath, brickWrapperStylesHelpersMap, brickStylesHelpersMap } from "../styles/helpers.js";
import { merge, get } from "lodash-es";
import { useBrickManifest } from "./use-brick-manifest.js";
import { b as ne } from "../../../../sdk/dist/shared/chunk-PSCN3VVA.js";
import "../../../../sdk/dist/shared/chunk-R6ATC4TC.js";
import "@sinclair/typebox";
import "../../../../sdk/dist/shared/chunk-CFF6Q7O7.js";
import "../../../../sdk/dist/shared/chunk-IKC3FK7L.js";
import "../../../../sdk/dist/shared/chunk-E6XEI7IK.js";
import "../../../../sdk/dist/shared/chunk-SQ5T4AT5.js";
import "../../../../sdk/dist/shared/chunk-G5CJU6RD.js";
import "../../../../sdk/dist/shared/chunk-PSTFJ5IJ.js";
import "../../../../sdk/dist/shared/chunk-NJGXC7D6.js";
import "../../../../sdk/dist/shared/chunk-SXHDQ64Z.js";
import "../../../../sdk/dist/shared/chunk-QX6OGRRT.js";
import "../../../../sdk/dist/shared/chunk-FLOMNC6J.js";
import "../../../../sdk/dist/shared/chunk-PLSV746R.js";
import "../../../../sdk/dist/shared/chunk-WBZW5LVH.js";
import "../../../../sdk/dist/shared/chunk-WYVJE6J5.js";
import "../../../../sdk/dist/shared/chunk-I3VL6SRH.js";
import "../../../../sdk/dist/shared/chunk-B3EATRFX.js";
import "../../../../sdk/dist/shared/chunk-IKHZD2JH.js";
import "../../../../sdk/dist/shared/chunk-PXI7AHWS.js";
import "../../../../sdk/dist/shared/chunk-SY6DZLTC.js";
import "../../../../sdk/dist/shared/chunk-7A2JNQX3.js";
import "../../../../sdk/dist/shared/chunk-3YVJ2ELD.js";
import { d as b } from "../../../../sdk/dist/shared/chunk-QGYZ7CG5.js";
import "../../../../sdk/dist/shared/chunk-AFVJZPLS.js";
import "../../../../sdk/dist/shared/chunk-A3GF4PYW.js";
import "../../../../sdk/dist/shared/chunk-W33JMRRN.js";
import { tx as D, css as E } from "../../../../style-system/dist/twind.js";
import { getStyleProperties } from "../styles/style-props.js";
import { useGenerationState, usePageAttributes } from "../../../../../use-page-data.js";
function useClassesFromStyleProps(stylesProps, brick, type) {
  const { props, mobileProps } = brick;
  const pageAttributes = usePageAttributes();
  const mergedProps = merge({}, ne[brick.type].props, props);
  const manifest = useBrickManifest(brick.type);
  const filtered = Object.entries(stylesProps).reduce((acc, [key, value]) => {
    const manifestField = get(manifest.props.properties, key);
    if (manifestField) {
      const resolvedField = b(manifestField);
      if (resolvedField.metadata?.filter) {
        const filter = resolvedField.metadata.filter;
        if (!filter(resolvedField, mergedProps, pageAttributes)) {
          acc.push(key);
        }
      }
    }
    return acc;
  }, []);
  const helpers = type === "brick" ? brickStylesHelpersMap : brickWrapperStylesHelpersMap;
  const classes = Object.entries(stylesProps).reduce(
    (acc, [path, styleId]) => {
      const helper = helpers[styleId];
      if (!helper) {
        return acc;
      }
      if (filtered.includes(path)) {
        return acc;
      }
      const part = extractStylePath(path);
      acc[part] = acc[part] ?? [];
      const resolvedProps = get(mergedProps, path);
      const resolvedMobileProps = get(mobileProps, path);
      const schema = get(manifest.props.properties, path);
      acc[part].push(
        // @ts-expect-error
        D(helper?.(resolvedProps, resolvedMobileProps, schema))
      );
      return acc;
    },
    {}
  );
  return classes;
}
function useBrickStyle(brick) {
  const manifest = useBrickManifest(brick.type);
  const stylesProps = getStyleProperties(manifest.props);
  return useClassesFromStyleProps(stylesProps, brick, "brick");
}
function useBrickWrapperStyle(_props) {
  const { brick, editable, selected, isContainerChild = false } = _props;
  const { props, mobileProps } = brick;
  const manifest = useBrickManifest(brick.type);
  const stylesProps = getStyleProperties(manifest.props);
  const styleIds = Object.values(stylesProps);
  const classes = useClassesFromStyleProps(stylesProps, brick, "wrapper");
  const isContainer = !!manifest.isContainer;
  const { isSetup } = useGenerationState();
  return D(
    manifest.staticClasses,
    props.className,
    props.preset,
    "brick-wrapper group/brick flex max-w-full",
    isContainer ? "@desktop:min-w-min min-h-fit h-auto flex-wrap" : (
      // ? "@desktop:min-w-min min-h-fit shrink-0 h-auto @mobile:flex-wrap @desktop:flex-nowrap"
      "min-w-min min-h-min"
    ),
    manifest.maxHeight?.mobile && `@mobile:max-h-[${manifest.maxHeight.mobile}px]`,
    manifest.maxHeight?.desktop && `@desktop:max-h-[${manifest.maxHeight.desktop}px]`,
    // !isContainerChild &&
    props.grow ? "@desktop:w-auto" : typeof props.width !== "undefined" ? `@desktop:w-[${props.width}]` : `@desktop:w-[${manifest.defaultWidth.desktop}]`,
    !isContainerChild && (typeof mobileProps?.width !== "undefined" ? `@mobile:min-w-[${mobileProps.width}]` : `@mobile:w-[${manifest.defaultWidth.mobile}]`),
    // Max width
    manifest.maxWidth?.mobile && `@mobile:max-w-[${manifest.maxWidth.mobile}px]`,
    manifest.maxWidth?.desktop && `@desktop:max-w-[${manifest.maxWidth.desktop}px]`,
    typeof props.height !== "undefined" ? E({
      minHeight: `${props.height}`
    }) : `@mobile:min-h-[${manifest.defaultHeight.mobile}] @desktop:min-h-[${manifest.defaultHeight.desktop}]`,
    styleIds.includes("styles:fixedPositioned") === false && "relative",
    // container children expand to fill the space
    isContainerChild && "container-child",
    // When a brick is hidden on mobile, hide the wrapper as well
    "@mobile:[&:has([data-mobile-hidden])]:hidden @desktop:[&:has([data-mobile-hidden])]:flex",
    isSetup && "animate animate-reveal-brick",
    getBrickWrapperEditorStyles(_props),
    ...Object.values(classes).flat()
  );
}
function getBrickWrapperEditorStyles({
  brick,
  editable,
  isContainerChild,
  selected
}) {
  const manifest = useBrickManifest(brick.type);
  const isContainer = !!manifest.isContainer;
  if (!editable) {
    return null;
  }
  return [
    "select-none",
    // "select-none transition-[outline] duration-[200ms]",
    editable && "transition-all duration-300",
    "outline outline-2 outline-transparent outline-dashed",
    {
      "outline-offset-2": !isContainer && !isContainerChild,
      "outline-offset-4": isContainer,
      "outline-offset-0": isContainerChild
    },
    selected && !isContainer && "!outline-upstart-400",
    selected && isContainer && "!outline-orange-300",
    !selected && !isContainerChild && !isContainer && "hover:(outline-upstart-400/60)",
    !selected && !isContainerChild && isContainer && "hover:(outline-orange-300/20)",
    !selected && isContainerChild && "hover:(outline-upstart-400/60) group-hover/brick:(outline-upstart-400/60)",
    E({
      "&.selected-group": {
        outlineColor: "var(--violet-8) !important"
      },
      "&.moving": {
        outlineColor: "var(--violet-8)"
      },
      "&.resizing": {
        outlineColor: "var(--violet-8)",
        minHeight: "min-content"
      },
      "& [data-brick-group]:hover": {
        outline: "1px dashed var(--violet-8)"
      },
      // Hide any UI children elements when dragging
      "&.moving [data-ui]": {
        display: "none"
      }
    })
  ];
}
export {
  useBrickStyle,
  useBrickWrapperStyle
};
//# sourceMappingURL=use-brick-style.js.map
