"use strict";
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
  // If the importer is in node compatibility mode or this is not an ESM
  // file that has been converted to a CommonJS file using a Babel-
  // compatible transform (i.e. "__esModule" has not been set), then set
  // "default" to the CommonJS "module.exports" for node compatibility.
  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
  mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
var design_settings_section_exports = {};
__export(design_settings_section_exports, {
  DesignSettingsSection: () => DesignSettingsSection
});
module.exports = __toCommonJS(design_settings_section_exports);
var import_design_system = require("@wix/design-system");
var import_react = __toESM(require("react"));
var import_ricos_context = require("./../../../ricos-context/index.js");
var import_next_schema = require("./../../../ricos-schema/next-schema/index.js");
var import_log_invariant = require("./../../../_shared/log-invariant.js");
var import_use_node_attrs = require("./../../../_shared/use-node-attrs.js");
var import_ui_components = require("./../../../ui-components/index.js");
var import_color_icon = require("../../assets/icons/color-icon.js");
var import_gradient_icon = require("../../assets/icons/gradient-icon.js");
var import_image_icon = require("../../assets/icons/image-icon.js");
var import_data_hooks = require("../../data-hooks.js");
var import_defaults = require("../../defaults.js");
var import_section = require("./section.js");
const DesignSettingsSection = ({ nodeId, logBi }) => {
  const { t } = (0, import_react.useContext)(import_ricos_context.RicosContext);
  const { pmNodeAttrs, patchPmNodeAttrs } = (0, import_use_node_attrs.useNodeAttrs)(nodeId, "POLL");
  if (!pmNodeAttrs) {
    (0, import_log_invariant.logInvariant)(Error("Poll settings: node attrs not found"));
    return null;
  }
  const backgroundType = pmNodeAttrs.design?.poll?.background?.type || import_next_schema.PollData_Design_PollDesign_Background_Type.COLOR;
  const handlePollBorderRadiusChange = (borderRadius) => {
    patchPmNodeAttrs({
      design: {
        ...pmNodeAttrs.design,
        poll: { ...pmNodeAttrs.design?.poll, borderRadius }
      }
    });
  };
  const handleOptionBorderRadiusChange = (borderRadius) => {
    patchPmNodeAttrs({
      design: {
        ...pmNodeAttrs.design,
        options: { ...pmNodeAttrs.design?.options, borderRadius }
      }
    });
  };
  const handleBackgroundChange = (value) => {
    const backgroundType2 = value;
    const backgroundPreset = import_defaults.BACKGROUND_PRESETS[backgroundType2][0];
    const bgValue = backgroundType2 === import_next_schema.PollData_Design_PollDesign_Background_Type.GRADIENT ? { gradient: JSON.parse(backgroundPreset) } : backgroundType2 === import_next_schema.PollData_Design_PollDesign_Background_Type.IMAGE ? { image: { src: { url: backgroundPreset } } } : { color: backgroundPreset };
    patchPmNodeAttrs({
      design: {
        ...pmNodeAttrs.design,
        poll: {
          ...pmNodeAttrs.design?.poll,
          background: { ...bgValue, type: backgroundType2 }
        }
      }
    });
  };
  const handleBackgroundColorChange = (value) => {
    const bgValue = backgroundType === import_next_schema.PollData_Design_PollDesign_Background_Type.GRADIENT ? { gradient: JSON.parse(value) } : backgroundType === import_next_schema.PollData_Design_PollDesign_Background_Type.IMAGE ? { image: { src: { url: value } } } : { color: value };
    patchPmNodeAttrs({
      design: {
        ...pmNodeAttrs.design,
        poll: {
          ...pmNodeAttrs.design?.poll,
          background: { ...bgValue, type: backgroundType }
        }
      }
    });
  };
  const dataSource = [
    {
      value: import_next_schema.PollData_Design_PollDesign_Background_Type.COLOR,
      label: t("Poll_PollSettings_Tab_Design_Section_Background_Color"),
      renderBackgroundImage: (props) => /* @__PURE__ */ import_react.default.createElement(import_color_icon.ColorIcon, { ...props })
    },
    {
      value: import_next_schema.PollData_Design_PollDesign_Background_Type.GRADIENT,
      label: t("Poll_PollSettings_Tab_Design_Section_Background_Gradient"),
      renderBackgroundImage: (props) => /* @__PURE__ */ import_react.default.createElement(import_gradient_icon.GradientIcon, { ...props })
    },
    {
      value: import_next_schema.PollData_Design_PollDesign_Background_Type.IMAGE,
      label: t("Poll_PollSettings_Tab_Design_Section_Background_Pattern"),
      renderBackgroundImage: (props) => /* @__PURE__ */ import_react.default.createElement(import_image_icon.ImageIcon, { ...props })
    }
  ];
  return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(import_section.Section, { title: t("Poll_PollSettings_Tab_Design_Section_Background_Header") }, /* @__PURE__ */ import_react.default.createElement(
    import_ui_components.ThumbnailPicker,
    {
      dataHook: import_data_hooks.DESIGN_SETTINGS_BACKGROUND_THUMBNAIL_PICKER,
      logBi,
      dataSource: dataSource.map((args) => ({
        ...args,
        dataHook: import_data_hooks.DESIGN_SETTINGS_BACKGROUND_THUMBNAIL + args.value
      })),
      selectedValue: backgroundType,
      title: t("Poll_PollSettings_Tab_Design_Section_Background_Choose"),
      onChange: handleBackgroundChange
    }
  )), /* @__PURE__ */ import_react.default.createElement(import_design_system.FormField, { label: t(PICK_BACKGROUND_LABELS[backgroundType]) }, /* @__PURE__ */ import_react.default.createElement(import_design_system.Box, { gap: "SP2", flexWrap: "wrap", display: "flex" }, import_defaults.BACKGROUND_PRESETS[backgroundType].map((color, index) => {
    const background = pmNodeAttrs.design?.poll?.background;
    return /* @__PURE__ */ import_react.default.createElement(import_design_system.Box, { width: "38px", key: index }, /* @__PURE__ */ import_react.default.createElement(
      import_design_system.FillPreview,
      {
        dataHook: PICK_BACKGROUND_DATA_HOOKS[backgroundType],
        selected: !background ? false : background.type === "COLOR" ? color === background?.color : background.type === "IMAGE" ? color === background?.image?.src?.url : background.type === "GRADIENT" ? color === JSON.stringify(background.gradient) : false,
        onClick: () => {
          logBi({
            dataHook: PICK_BACKGROUND_DATA_HOOKS[backgroundType],
            value: pmNodeAttrs.design?.poll?.background?.type === "GRADIENT" ? gradientColorObjToString(JSON.parse(color)) : color
          });
          handleBackgroundColorChange(color);
        },
        fill: pmNodeAttrs.design?.poll?.background?.type === "GRADIENT" ? gradientColorObjToString(JSON.parse(color)) : color
      }
    ));
  }))), /* @__PURE__ */ import_react.default.createElement(import_design_system.Box, { marginInline: "-18px" }, /* @__PURE__ */ import_react.default.createElement(import_design_system.Divider, null)), /* @__PURE__ */ import_react.default.createElement(import_section.Section, { title: t("Poll_PollSettings_Tab_Design_Section_CornerRadius_Header") }, /* @__PURE__ */ import_react.default.createElement(
    import_ui_components.SliderWithInput,
    {
      min: 0,
      max: 20,
      label: t("Poll_PollSettings_Tab_Design_Section_CornerRadius_Poll"),
      onChange: handlePollBorderRadiusChange,
      value: pmNodeAttrs.design?.poll?.borderRadius ?? 0,
      sliderDataHook: import_data_hooks.DESIGN_SETTINGS_CORNER_RADIUS_SLIDER,
      inputDataHook: import_data_hooks.DESIGN_SETTINGS_CORNER_RADIUS_INPUT,
      logBi
    }
  ), /* @__PURE__ */ import_react.default.createElement(
    import_ui_components.SliderWithInput,
    {
      min: 0,
      max: 10,
      label: t("Poll_PollSettings_Tab_Design_Section_CornerRadius_Answers"),
      onChange: handleOptionBorderRadiusChange,
      value: pmNodeAttrs.design?.options?.borderRadius ?? 0,
      sliderDataHook: import_data_hooks.DESIGN_SETTINGS_ANSWERS_CORNER_RADIUS_SLIDER,
      inputDataHook: import_data_hooks.DESIGN_SETTINGS_ANSWERS_CORNER_RADIUS_INPUT,
      logBi
    }
  )));
};
const PICK_BACKGROUND_LABELS = {
  [import_next_schema.PollData_Design_PollDesign_Background_Type.COLOR]: "Poll_PollSettings_Tab_Design_Section_Background_Color_Pick",
  [import_next_schema.PollData_Design_PollDesign_Background_Type.IMAGE]: "Poll_PollSettings_Tab_Design_Section_Background_Pattern_Pick",
  [import_next_schema.PollData_Design_PollDesign_Background_Type.GRADIENT]: "Poll_PollSettings_Tab_Design_Section_Background_Gradient_Pick"
};
const PICK_BACKGROUND_DATA_HOOKS = {
  [import_next_schema.PollData_Design_PollDesign_Background_Type.COLOR]: import_data_hooks.DESIGN_SETTINGS_BACKGROUND_COLOR_BUTTON,
  [import_next_schema.PollData_Design_PollDesign_Background_Type.IMAGE]: import_data_hooks.DESIGN_SETTINGS_BACKGROUND_IMAGE_BUTTON,
  [import_next_schema.PollData_Design_PollDesign_Background_Type.GRADIENT]: import_data_hooks.DESIGN_SETTINGS_BACKGROUND_GRADIENT_BUTTON
};
const gradientColorObjToString = (gradient) => {
  return `linear-gradient(${gradient?.angle}deg, ${gradient.startColor} 0%, ${gradient.lastColor} 100%)`;
};
//# sourceMappingURL=design-settings-section.js.map
