"use client";
import { jsxs as i, jsx as n, Fragment as u } from "react/jsx-runtime";
import { useAppSelector as R } from "../../hooks/use-app-selector.js";
import { useSettings as s } from "../../hooks/use-settings.js";
import { getCurrentBreakpoint as $ } from "../../../../../store/selectors.js";
import { BackgroundType as l, Unit as r } from "../../types/style.js";
import { BsSquareHalf as T } from "../../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.0.0/node_modules/react-icons/bs/index.js";
import { PiPaintBrushFill as h } from "../../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.0.0/node_modules/react-icons/pi/index.js";
import { ColorControl as p } from "./color.control.js";
import { SelectControl as a } from "./select.control.js";
import { SliderUnitControl as c } from "./slider-unit.control.js";
import { ToggleGroupControl as f } from "./toggle-group.control.js";
const X = ({
  mode: e,
  type: o,
  fieldName: t,
  showImage: E = !0
}) => {
  const C = R($), { 0: b } = s(
    `${t}.position.${C}.${e}`,
    o
  ), [g] = s(
    e ? `${t}.type.${e}` : t,
    o
  ), [m] = s(
    e ? `${t}.image.${e}` : `${t}.image`,
    o
  ), [v] = s(`${t}.gradient.type`, o);
  return /* @__PURE__ */ i("div", { children: [
    /* @__PURE__ */ n(
      f,
      {
        fieldName: `${t}.type`,
        label: "Background Type",
        mode: e,
        type: o,
        controls: [
          {
            tooltipContent: l.CLASSIC,
            toggleTrigger: /* @__PURE__ */ n(h, { className: "text-sm" }),
            value: l.CLASSIC
          },
          {
            tooltipContent: l.GRADIENT,
            toggleTrigger: /* @__PURE__ */ n(T, { className: "text-sm" }),
            value: l.GRADIENT
          }
        ]
      }
    ),
    g === l.CLASSIC && /* @__PURE__ */ i(u, { children: [
      /* @__PURE__ */ n(
        p,
        {
          label: "Background Color",
          type: o,
          fieldName: `${t}.color`,
          mode: e
        }
      ),
      m && /* @__PURE__ */ i(u, { children: [
        /* @__PURE__ */ n(
          a,
          {
            type: o,
            fieldName: `${t}.position`,
            responsive: !0,
            label: "Position",
            mode: e,
            options: [
              { content: "Center Center", value: "center center" },
              { content: "Center Left", value: "center left" },
              { content: "Center Right", value: "center right" },
              { content: "Top Center", value: "top center" },
              { content: "Top Left", value: "top left" },
              { content: "Top Right", value: "top right" },
              { content: "Bottom Center", value: "bottom center" },
              { content: "Bottom Left", value: "bottom left" },
              { content: "Bottom Right", value: "bottom right" },
              { content: "Custom", value: "custom" }
            ]
          }
        ),
        b === "custom" && /* @__PURE__ */ i(u, { children: [
          /* @__PURE__ */ n(
            c,
            {
              type: o,
              fieldName: `${t}.positionX`,
              label: "Position X",
              units: [r.PX, r.REM, r.EM, r.PERCENTAGE],
              mode: e,
              responsive: !0
            }
          ),
          /* @__PURE__ */ n(
            c,
            {
              type: o,
              fieldName: `${t}.positionY`,
              label: "Position Y",
              units: [r.PX, r.REM, r.EM, r.PERCENTAGE],
              mode: e,
              responsive: !0
            }
          )
        ] }),
        /* @__PURE__ */ n(
          a,
          {
            type: o,
            fieldName: `${t}.attachment`,
            label: "Attachment",
            options: [
              { content: "Fixed", value: "fixed" },
              { content: "Scroll", value: "scroll" }
            ],
            mode: e
          }
        ),
        /* @__PURE__ */ n(
          a,
          {
            type: o,
            fieldName: `${t}.repeat`,
            label: "Repeat",
            mode: e,
            responsive: !0,
            options: [
              { content: "No Repeat", value: "no-repeat" },
              { content: "Repeat", value: "repeat" },
              { content: "Repeat X", value: "repeat-x" },
              { content: "Repeat Y", value: "repeat-y" }
            ]
          }
        ),
        /* @__PURE__ */ n(
          a,
          {
            responsive: !0,
            mode: e,
            type: o,
            fieldName: `${t}.size`,
            label: "Size",
            options: [
              { content: "Auto", value: "auto" },
              { content: "Cover", value: "cover" },
              { content: "Contain", value: "contain" },
              { content: "Initial", value: "initial" }
            ]
          }
        )
      ] })
    ] }),
    g === l.GRADIENT && /* @__PURE__ */ i(u, { children: [
      /* @__PURE__ */ n(
        p,
        {
          label: "Color 1",
          type: o,
          fieldName: `${t}.gradient.color1`,
          mode: e
        }
      ),
      /* @__PURE__ */ n(
        c,
        {
          type: o,
          fieldName: `${t}.gradient.location1`,
          label: "Location 1",
          units: [r.PERCENTAGE],
          mode: e
        }
      ),
      /* @__PURE__ */ n(
        p,
        {
          label: "Color 2",
          type: o,
          fieldName: `${t}.gradient.color2`,
          mode: e
        }
      ),
      /* @__PURE__ */ n(
        c,
        {
          type: o,
          fieldName: `${t}.gradient.location2`,
          label: "Location 2",
          units: [r.PERCENTAGE],
          mode: e
        }
      ),
      /* @__PURE__ */ n(
        a,
        {
          options: [
            { content: "Linear", value: "linear" },
            { content: "Radial", value: "radial" }
          ],
          type: o,
          fieldName: `${t}.gradient.type`,
          label: "Type",
          mode: e
        }
      ),
      v === "linear" && /* @__PURE__ */ n(
        c,
        {
          type: o,
          fieldName: `${t}.gradient.angle`,
          label: "Angle",
          mode: e,
          units: [r.DEG, r.GRAD, r.RAD, r.TURN]
        }
      ),
      v === "radial" && /* @__PURE__ */ n(
        a,
        {
          mode: e,
          type: o,
          fieldName: `${t}.gradient.position`,
          label: "Position",
          options: [
            { content: "Center Center", value: "center center" },
            { content: "Center Left", value: "center left" },
            { content: "Center Right", value: "center right" },
            { content: "Top Center", value: "top center" },
            { content: "Top Left", value: "top left" },
            { content: "Top Right", value: "top right" },
            { content: "Bottom Center", value: "bottom center" },
            { content: "Bottom Left", value: "bottom left" },
            { content: "Bottom Right", value: "bottom right" }
          ]
        }
      )
    ] })
  ] });
};
export {
  X as BackgroundControl
};
//# sourceMappingURL=background.control.js.map
