import { Box, Text, Thumbnail } from "@wix/design-system";
import React, { useContext, useMemo } from "react";
import { RicosContext } from "./../../ricos-context/index.js";
import {
  AppEmbedData_CardStyles_Alignment,
  AppEmbedData_CardStyles_Type,
  AppEmbedData_ImageStyles_AspectRatio,
  AppEmbedData_ImageStyles_Position,
  AppEmbedData_ImageStyles_Resizing,
  AppEmbedData_RibbonStyles_Placement
} from "./../../ricos-schema/next-schema/generated/ricos_document.js";
import { ACTION_COLOR_DEFAULT } from "./../../ricos-styles/theme-constants.js";
import {
  getResolvedColorPaletteColors,
  getResolvedPaletteColors
} from "./../../ricos-styles/themeStrategy/generators/palette.js";
import { canTransformToHex, toHexFormat } from "./../../ricos-styles/themeStrategy/theme-utils.js";
import { combineHexWithOpacity, dataHook } from "./../../wix-rich-content-common/index.js";
import { ROOT } from "../data-hooks.js";
import { Preset1 } from "../icons/preset1.js";
import { Preset2 } from "../icons/preset2.js";
import { Preset3 } from "../icons/preset3.js";
import { Preset4 } from "../icons/preset4.js";
import { Preset5 } from "../icons/preset5.js";
import { Preset6 } from "../icons/preset6.js";
import { Preset7 } from "../icons/preset7.js";
import { TITLE_PRICE_LAYOUT } from "../viewer/vertical-embed-styles.js";
const DEFAULT_OPACITY = 26 / 255 * 100;
const Presets = ({ patchPmNodeAttrs, nodeId }) => {
  const { t, theme, isMobile } = useContext(RicosContext);
  const [actionColor, actionColorWithOpacity] = useMemo(() => {
    const editorElement = document.querySelector(dataHook(`editor-${nodeId}`, ROOT));
    const style = editorElement ? window.getComputedStyle(editorElement) : void 0;
    const baseActionColor = style?.getPropertyValue("--ricos-action-color") || (theme?.colorPalette ? getResolvedColorPaletteColors(theme.colorPalette) : getResolvedPaletteColors(theme?.palette)).actionColor || ACTION_COLOR_DEFAULT;
    const actionColor2 = canTransformToHex(baseActionColor) ? toHexFormat(baseActionColor) : ACTION_COLOR_DEFAULT;
    const actionColorWithOpacity2 = combineHexWithOpacity(actionColor2, DEFAULT_OPACITY);
    return [actionColor2, actionColorWithOpacity2];
  }, [nodeId, theme?.colorPalette, theme?.palette]);
  const presets = [
    {
      id: "preset-1",
      icon: Preset1,
      label: "Preset 1",
      settings: {
        buttonStyles: {
          borderRadius: 0,
          backgroundColor: actionColor
        },
        imageStyles: {
          imagePosition: AppEmbedData_ImageStyles_Position.START,
          aspectRatio: AppEmbedData_ImageStyles_AspectRatio.SQUARE,
          resizing: AppEmbedData_ImageStyles_Resizing.FILL
        },
        cardStyles: {
          backgroundColor: actionColorWithOpacity,
          borderWidth: 0,
          borderRadius: 0,
          type: AppEmbedData_CardStyles_Type.CONTAINED,
          alignment: AppEmbedData_CardStyles_Alignment.START,
          titlePriceLayout: TITLE_PRICE_LAYOUT.STACKED
        },
        containerData: {
          width: {
            size: "CONTENT"
          },
          alignment: "CENTER",
          textWrap: false
        }
      }
    },
    {
      id: "preset-2",
      icon: Preset2,
      label: "Preset 2",
      settings: {
        hideButton: true,
        hideRibbon: false,
        buttonStyles: {
          borderRadius: 10,
          backgroundColor: actionColor
        },
        imageStyles: {
          imagePosition: AppEmbedData_ImageStyles_Position.TOP,
          aspectRatio: AppEmbedData_ImageStyles_AspectRatio.SQUARE,
          resizing: AppEmbedData_ImageStyles_Resizing.FILL
        },
        ribbonStyles: {
          ribbonText: "Selling fast",
          ribbonPlacement: AppEmbedData_RibbonStyles_Placement.IMAGE
        },
        cardStyles: {
          backgroundColor: actionColorWithOpacity,
          borderWidth: 0,
          borderRadius: 20,
          type: AppEmbedData_CardStyles_Type.CONTAINED,
          alignment: AppEmbedData_CardStyles_Alignment.START,
          titlePriceLayout: TITLE_PRICE_LAYOUT.STACKED
        },
        containerData: {
          width: {
            size: "SMALL"
          },
          alignment: "CENTER",
          textWrap: true
        }
      }
    },
    {
      id: "preset-3",
      icon: Preset3,
      label: "Preset 3",
      settings: {
        buttonStyles: {
          borderRadius: 10,
          backgroundColor: actionColor
        },
        imageStyles: {
          imagePosition: AppEmbedData_ImageStyles_Position.START,
          aspectRatio: AppEmbedData_ImageStyles_AspectRatio.SQUARE,
          resizing: AppEmbedData_ImageStyles_Resizing.FILL,
          borderColor: "#FFFFFF",
          borderWidth: 10,
          borderRadius: 20
        },
        ribbonStyles: {
          ribbonPlacement: AppEmbedData_RibbonStyles_Placement.IMAGE
        },
        cardStyles: {
          backgroundColor: "#00062400",
          borderColor: "#CFD1DC",
          borderWidth: 1,
          borderRadius: 20,
          type: AppEmbedData_CardStyles_Type.CONTAINED,
          alignment: AppEmbedData_CardStyles_Alignment.START,
          titlePriceLayout: TITLE_PRICE_LAYOUT.SIDE_BY_SIDE
        },
        containerData: {
          width: {
            size: "CONTENT"
          },
          alignment: "CENTER",
          textWrap: false
        }
      }
    },
    {
      id: "preset-4",
      icon: Preset4,
      label: "Preset 4",
      settings: {
        buttonStyles: {
          borderRadius: 10,
          backgroundColor: actionColor
        },
        imageStyles: {
          imagePosition: AppEmbedData_ImageStyles_Position.TOP,
          aspectRatio: AppEmbedData_ImageStyles_AspectRatio.SQUARE,
          resizing: AppEmbedData_ImageStyles_Resizing.FILL,
          borderColor: "#FFFFFF",
          borderWidth: 10,
          borderRadius: 20
        },
        ribbonStyles: {
          ribbonPlacement: AppEmbedData_RibbonStyles_Placement.IMAGE
        },
        cardStyles: {
          backgroundColor: "#00062400",
          borderColor: "#CFD1DC",
          borderWidth: 1,
          borderRadius: 20,
          type: AppEmbedData_CardStyles_Type.CONTAINED,
          alignment: AppEmbedData_CardStyles_Alignment.START,
          titlePriceLayout: TITLE_PRICE_LAYOUT.STACKED
        },
        containerData: {
          width: {
            size: "SMALL"
          },
          alignment: "CENTER",
          textWrap: false
        }
      }
    },
    {
      id: "preset-5",
      icon: Preset5,
      label: "Preset 5",
      settings: {
        hideRibbon: false,
        buttonStyles: {
          borderRadius: 10,
          backgroundColor: actionColor
        },
        imageStyles: {
          imagePosition: AppEmbedData_ImageStyles_Position.START,
          aspectRatio: AppEmbedData_ImageStyles_AspectRatio.SQUARE,
          resizing: AppEmbedData_ImageStyles_Resizing.FILL,
          borderRadius: 12
        },
        ribbonStyles: {
          ribbonText: "Selling fast",
          ribbonPlacement: AppEmbedData_RibbonStyles_Placement.PRODUCT_INFO
        },
        cardStyles: {
          borderWidth: 0,
          type: AppEmbedData_CardStyles_Type.FRAMELESS,
          alignment: AppEmbedData_CardStyles_Alignment.START,
          titlePriceLayout: TITLE_PRICE_LAYOUT.STACKED
        },
        containerData: {
          width: {
            size: "CONTENT"
          },
          alignment: "CENTER",
          textWrap: false
        }
      }
    },
    {
      id: "preset-6",
      icon: Preset6,
      label: "Preset 6",
      settings: {
        buttonStyles: {
          borderRadius: 10,
          backgroundColor: actionColor
        },
        imageStyles: {
          imagePosition: AppEmbedData_ImageStyles_Position.TOP,
          aspectRatio: AppEmbedData_ImageStyles_AspectRatio.SQUARE,
          resizing: AppEmbedData_ImageStyles_Resizing.FILL,
          borderRadius: 12
        },
        ribbonStyles: {
          ribbonPlacement: AppEmbedData_RibbonStyles_Placement.IMAGE
        },
        cardStyles: {
          borderWidth: 0,
          type: AppEmbedData_CardStyles_Type.FRAMELESS,
          alignment: AppEmbedData_CardStyles_Alignment.CENTER,
          titlePriceLayout: TITLE_PRICE_LAYOUT.STACKED
        },
        containerData: {
          width: {
            size: "SMALL"
          },
          alignment: "CENTER",
          textWrap: false
        }
      }
    },
    {
      id: "preset-7",
      icon: Preset7,
      label: "Preset 7",
      settings: {
        hideRibbon: false,
        buttonStyles: {
          borderRadius: 0,
          backgroundColor: actionColor
        },
        imageStyles: {
          imagePosition: AppEmbedData_ImageStyles_Position.TOP,
          aspectRatio: AppEmbedData_ImageStyles_AspectRatio.SQUARE,
          resizing: AppEmbedData_ImageStyles_Resizing.FILL
        },
        ribbonStyles: {
          ribbonText: "Selling fast",
          ribbonPlacement: AppEmbedData_RibbonStyles_Placement.IMAGE
        },
        cardStyles: {
          backgroundColor: actionColorWithOpacity,
          borderWidth: 0,
          borderRadius: 0,
          type: AppEmbedData_CardStyles_Type.CONTAINED,
          alignment: AppEmbedData_CardStyles_Alignment.START,
          titlePriceLayout: TITLE_PRICE_LAYOUT.STACKED
        },
        containerData: {
          width: {
            size: "SMALL"
          },
          alignment: "CENTER",
          textWrap: true
        }
      }
    }
  ];
  const applyPreset = (preset) => {
    patchPmNodeAttrs({
      hideButton: preset.settings.hideButton,
      hideRibbon: preset.settings.hideRibbon,
      buttonStyles: preset.settings.buttonStyles,
      cardStyles: preset.settings.cardStyles,
      imageStyles: preset.settings.imageStyles,
      ribbonStyles: preset.settings.ribbonStyles,
      containerData: preset.settings.containerData
    });
  };
  const renderPresetThumbnail = (preset) => {
    const IconComponent = preset.icon;
    return /* @__PURE__ */ React.createElement(Box, { key: preset.id, direction: "vertical", gap: "SP2", align: "center" }, /* @__PURE__ */ React.createElement(
      Thumbnail,
      {
        height: 112,
        width: 117,
        size: "medium",
        onClick: () => applyPreset(preset),
        noPadding: true,
        contentAlignment: "center"
      },
      /* @__PURE__ */ React.createElement(IconComponent, null)
    ));
  };
  return /* @__PURE__ */ React.createElement(
    "div",
    {
      style: {
        maxHeight: isMobile ? void 0 : "300px",
        overflowY: "auto"
      }
    },
    /* @__PURE__ */ React.createElement(Box, { direction: "vertical", gap: "SP3", paddingTop: "SP3", paddingLeft: "SP4", paddingRight: "SP4" }, /* @__PURE__ */ React.createElement(Text, { size: "medium", weight: "bold" }, t("Embed_Vertical_Settings_Modal_Layout_Presets")), /* @__PURE__ */ React.createElement(Box, { direction: "vertical", gap: "6px", align: "left" }, /* @__PURE__ */ React.createElement(Box, { direction: "horizontal", gap: "6px", align: "left" }, presets.slice(0, 2).map(renderPresetThumbnail)), /* @__PURE__ */ React.createElement(Box, { direction: "horizontal", gap: "6px", align: "left" }, presets.slice(2, 4).map(renderPresetThumbnail)), /* @__PURE__ */ React.createElement(Box, { direction: "horizontal", gap: "6px", align: "left" }, presets.slice(4, 6).map(renderPresetThumbnail)), /* @__PURE__ */ React.createElement(Box, { direction: "horizontal", gap: "6px", align: "left" }, presets.slice(6, 7).map(renderPresetThumbnail))))
  );
};
export {
  Presets
};
//# sourceMappingURL=presets.js.map
