import { Box, Divider, FillPreview, FormField } from "@wix/design-system";
import React, { useContext } from "react";
import { RicosContext } from "./../../../ricos-context/index.js";
import { PollData_Design_PollDesign_Background_Type } from "./../../../ricos-schema/next-schema/index.js";
import { logInvariant } from "./../../../_shared/log-invariant.js";
import { useNodeAttrs } from "./../../../_shared/use-node-attrs.js";
import { SliderWithInput, ThumbnailPicker } from "./../../../ui-components/index.js";
import { ColorIcon } from "../../assets/icons/color-icon.js";
import { GradientIcon } from "../../assets/icons/gradient-icon.js";
import { ImageIcon } from "../../assets/icons/image-icon.js";
import {
  DESIGN_SETTINGS_ANSWERS_CORNER_RADIUS_INPUT,
  DESIGN_SETTINGS_ANSWERS_CORNER_RADIUS_SLIDER,
  DESIGN_SETTINGS_BACKGROUND_COLOR_BUTTON,
  DESIGN_SETTINGS_BACKGROUND_GRADIENT_BUTTON,
  DESIGN_SETTINGS_BACKGROUND_IMAGE_BUTTON,
  DESIGN_SETTINGS_BACKGROUND_THUMBNAIL,
  DESIGN_SETTINGS_BACKGROUND_THUMBNAIL_PICKER,
  DESIGN_SETTINGS_CORNER_RADIUS_INPUT,
  DESIGN_SETTINGS_CORNER_RADIUS_SLIDER
} from "../../data-hooks.js";
import { BACKGROUND_PRESETS } from "../../defaults.js";
import { Section } from "./section.js";
const DesignSettingsSection = ({ nodeId, logBi }) => {
  const { t } = useContext(RicosContext);
  const { pmNodeAttrs, patchPmNodeAttrs } = useNodeAttrs(nodeId, "POLL");
  if (!pmNodeAttrs) {
    logInvariant(Error("Poll settings: node attrs not found"));
    return null;
  }
  const backgroundType = pmNodeAttrs.design?.poll?.background?.type || 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 = BACKGROUND_PRESETS[backgroundType2][0];
    const bgValue = backgroundType2 === PollData_Design_PollDesign_Background_Type.GRADIENT ? { gradient: JSON.parse(backgroundPreset) } : backgroundType2 === 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 === PollData_Design_PollDesign_Background_Type.GRADIENT ? { gradient: JSON.parse(value) } : backgroundType === 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: PollData_Design_PollDesign_Background_Type.COLOR,
      label: t("Poll_PollSettings_Tab_Design_Section_Background_Color"),
      renderBackgroundImage: (props) => /* @__PURE__ */ React.createElement(ColorIcon, { ...props })
    },
    {
      value: PollData_Design_PollDesign_Background_Type.GRADIENT,
      label: t("Poll_PollSettings_Tab_Design_Section_Background_Gradient"),
      renderBackgroundImage: (props) => /* @__PURE__ */ React.createElement(GradientIcon, { ...props })
    },
    {
      value: PollData_Design_PollDesign_Background_Type.IMAGE,
      label: t("Poll_PollSettings_Tab_Design_Section_Background_Pattern"),
      renderBackgroundImage: (props) => /* @__PURE__ */ React.createElement(ImageIcon, { ...props })
    }
  ];
  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Section, { title: t("Poll_PollSettings_Tab_Design_Section_Background_Header") }, /* @__PURE__ */ React.createElement(
    ThumbnailPicker,
    {
      dataHook: DESIGN_SETTINGS_BACKGROUND_THUMBNAIL_PICKER,
      logBi,
      dataSource: dataSource.map((args) => ({
        ...args,
        dataHook: DESIGN_SETTINGS_BACKGROUND_THUMBNAIL + args.value
      })),
      selectedValue: backgroundType,
      title: t("Poll_PollSettings_Tab_Design_Section_Background_Choose"),
      onChange: handleBackgroundChange
    }
  )), /* @__PURE__ */ React.createElement(FormField, { label: t(PICK_BACKGROUND_LABELS[backgroundType]) }, /* @__PURE__ */ React.createElement(Box, { gap: "SP2", flexWrap: "wrap", display: "flex" }, BACKGROUND_PRESETS[backgroundType].map((color, index) => {
    const background = pmNodeAttrs.design?.poll?.background;
    return /* @__PURE__ */ React.createElement(Box, { width: "38px", key: index }, /* @__PURE__ */ React.createElement(
      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__ */ React.createElement(Box, { marginInline: "-18px" }, /* @__PURE__ */ React.createElement(Divider, null)), /* @__PURE__ */ React.createElement(Section, { title: t("Poll_PollSettings_Tab_Design_Section_CornerRadius_Header") }, /* @__PURE__ */ React.createElement(
    SliderWithInput,
    {
      min: 0,
      max: 20,
      label: t("Poll_PollSettings_Tab_Design_Section_CornerRadius_Poll"),
      onChange: handlePollBorderRadiusChange,
      value: pmNodeAttrs.design?.poll?.borderRadius ?? 0,
      sliderDataHook: DESIGN_SETTINGS_CORNER_RADIUS_SLIDER,
      inputDataHook: DESIGN_SETTINGS_CORNER_RADIUS_INPUT,
      logBi
    }
  ), /* @__PURE__ */ React.createElement(
    SliderWithInput,
    {
      min: 0,
      max: 10,
      label: t("Poll_PollSettings_Tab_Design_Section_CornerRadius_Answers"),
      onChange: handleOptionBorderRadiusChange,
      value: pmNodeAttrs.design?.options?.borderRadius ?? 0,
      sliderDataHook: DESIGN_SETTINGS_ANSWERS_CORNER_RADIUS_SLIDER,
      inputDataHook: DESIGN_SETTINGS_ANSWERS_CORNER_RADIUS_INPUT,
      logBi
    }
  )));
};
const PICK_BACKGROUND_LABELS = {
  [PollData_Design_PollDesign_Background_Type.COLOR]: "Poll_PollSettings_Tab_Design_Section_Background_Color_Pick",
  [PollData_Design_PollDesign_Background_Type.IMAGE]: "Poll_PollSettings_Tab_Design_Section_Background_Pattern_Pick",
  [PollData_Design_PollDesign_Background_Type.GRADIENT]: "Poll_PollSettings_Tab_Design_Section_Background_Gradient_Pick"
};
const PICK_BACKGROUND_DATA_HOOKS = {
  [PollData_Design_PollDesign_Background_Type.COLOR]: DESIGN_SETTINGS_BACKGROUND_COLOR_BUTTON,
  [PollData_Design_PollDesign_Background_Type.IMAGE]: DESIGN_SETTINGS_BACKGROUND_IMAGE_BUTTON,
  [PollData_Design_PollDesign_Background_Type.GRADIENT]: DESIGN_SETTINGS_BACKGROUND_GRADIENT_BUTTON
};
const gradientColorObjToString = (gradient) => {
  return `linear-gradient(${gradient?.angle}deg, ${gradient.startColor} 0%, ${gradient.lastColor} 100%)`;
};
export {
  DesignSettingsSection
};
//# sourceMappingURL=design-settings-section.js.map
