import { BlockGroup as ro, BlockType as lo } from "../../types/block.js";
import { Unit as a, SizeType as uo, BackgroundType as co } from "../../types/style.js";
import { generateResponsiveStyle as w, generateUnitValue as u, generateSpacingValue as io, generatePseudoStyle as ao, generateBorderRadius as go, generateBoxShadow as fo, generateTypographyFromBreakpoint as K, generateBgGradient as po } from "../../utils/style.js";
import { lazy as Q } from "react";
import { TfiLayoutSlider as vo } from "../../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.0.0/node_modules/react-icons/tfi/index.js";
import { createBlockConfig as mo, createId as Z } from "../../utils/index.js";
import { generateSize as ho } from "../button/utils/index.js";
import { SliderPresets as yo } from "./types/index.js";
const Xo = mo({
  type: lo.SLIDER,
  label: "Slider",
  icon: vo,
  component: Q(() => import("./components/slider.block.js")),
  group: ro.ADVANCED,
  settings: {
    preset: { desktop: yo.Preset1 },
    showDots: { desktop: !0 },
    infinite: { desktop: !0 },
    showArrows: { desktop: !0 },
    pauseOnHover: { desktop: !0 },
    autoPlay: { desktop: !0 },
    autoplaySpeed: { desktop: 3e3 },
    horizontalPosition: { desktop: "center" },
    verticalPosition: { desktop: "center" },
    textAlign: { desktop: "center" },
    navigation: {
      arrowSize: {
        desktop: {
          unit: a.PX,
          value: 22
        }
      },
      dotSize: {
        desktop: {
          unit: a.PX,
          value: 16
        }
      },
      dotColor: { desktop: { default: "rgba(0,0,0,0.2)" } },
      dotActiveColor: { desktop: { default: "rgba(0,0,0,0.8)" } }
    },
    button: {
      size: { desktop: uo.DEFAULT },
      border: {
        width: {
          unit: a.PX,
          value: 2
        },
        radius: {
          unit: a.PX,
          value: 5
        },
        color: {
          default: "#fff",
          hover: "#fff"
        }
      },
      typography: {
        fontSize: {
          desktop: {
            unit: a.PX,
            value: 16
          },
          tablet: {
            unit: a.PX,
            value: 15
          },
          mobile: {
            unit: a.PX,
            value: 10
          }
        }
      },
      background: {
        gradient: {
          color1: {
            default: "var(--accent-color)",
            hover: "var(--accent-color)"
          },
          location1: {
            default: {
              unit: a.PERCENTAGE,
              value: 0
            },
            hover: {
              unit: a.PERCENTAGE,
              value: 0
            }
          },
          location2: {
            default: {
              unit: a.PERCENTAGE,
              value: 100
            },
            hover: {
              unit: a.PERCENTAGE,
              value: 100
            }
          },
          angle: {
            default: {
              unit: a.DEG,
              value: 180
            },
            hover: {
              unit: a.DEG,
              value: 180
            }
          },
          type: {
            default: "linear",
            hover: "linear"
          },
          position: {
            default: "center center"
          }
        },
        transitionDuration: 200
      },
      textColor: {
        default: "#fff",
        hover: "#fff"
      }
    },
    title: {
      marginBottom: {
        desktop: {
          unit: a.PX,
          value: 20
        }
      },
      typography: {
        fontSize: {
          desktop: {
            unit: a.PX,
            value: 40
          },
          tablet: {
            unit: a.PX,
            value: 30
          },
          mobile: {
            unit: a.PX,
            value: 20
          }
        }
      }
    },
    description: {
      marginBottom: {
        desktop: {
          unit: a.PX,
          value: 30
        }
      },
      typography: {
        fontSize: {
          desktop: {
            unit: a.PX,
            value: 18
          },
          tablet: {
            unit: a.PX,
            value: 15
          },
          mobile: {
            unit: a.PX,
            value: 10
          }
        }
      }
    },
    height: {
      desktop: {
        unit: a.PX,
        value: 400
      },
      tablet: {
        unit: a.PX,
        value: 350
      },
      mobile: {
        unit: a.PX,
        value: 300
      }
    },
    contentWidth: {
      desktop: {
        unit: a.PERCENTAGE,
        value: 100
      }
    },
    slides: [
      {
        id: Z(),
        title: { en: "Slide 1 Heading" },
        description: {
          en: "Lorem ipsum dolor sit, amet consectetur adipisicing elit."
        },
        button: { text: { en: "Click Here" } },
        background: {
          color: { default: "#833ca3" },
          size: { desktop: { default: "cover" } }
        },
        contentColor: { default: "#fff" },
        overlayColor: { default: "rgba(0,0,0,0.3)" }
      },
      {
        id: Z(),
        title: { en: "Slide 2 Heading" },
        description: {
          en: "Lorem ipsum dolor sit, amet consectetur adipisicing elit."
        },
        button: { text: { en: "Click Here" } },
        background: {
          color: { default: "#4054b2" },
          size: { desktop: { default: "cover" } }
        },
        contentColor: { default: "#fff" },
        overlayColor: { default: "rgba(0,0,0,0.3)" }
      },
      {
        id: Z(),
        title: { en: "Slide 3 Heading" },
        description: {
          en: "Lorem ipsum dolor sit, amet consectetur adipisicing elit."
        },
        button: { text: { en: "Click Here" } },
        background: {
          color: { default: "#1abc9c" },
          size: { desktop: { default: "cover" } }
        },
        contentColor: { default: "#fff" },
        overlayColor: { default: "rgba(0,0,0,0.3)" }
      }
    ]
  },
  style: ({ settings: o, breakpoints: B }) => {
    var _;
    const no = (_ = o.slides) == null ? void 0 : _.reduce(
      (e, t) => {
        var i, d;
        return {
          ...e,
          [`& .slide-item-${t.id}`]: {
            "& .overlay": {
              backgroundColor: (i = t.overlayColor) == null ? void 0 : i.default,
              mixBlendMode: (d = t.blendMode) == null ? void 0 : d.desktop
            },
            ...w(B, (n) => {
              var c, f, r, p, v, m, h, g, y, b, k, P, S, x, C, s, z, X, E, R, I, T, D, G, H, L, W, N, A, U, V, Y, F, M, $, O, q, J;
              const l = (r = (f = (c = t.background) == null ? void 0 : c.position) == null ? void 0 : f[n]) == null ? void 0 : r.default;
              return {
                backgroundColor: (v = (p = t.background) == null ? void 0 : p.color) == null ? void 0 : v.default,
                backgroundImage: (g = (h = (m = t.background) == null ? void 0 : m.image) == null ? void 0 : h.default) != null && g.url ? `url("${(k = (b = (y = t.background) == null ? void 0 : y.image) == null ? void 0 : b.default) == null ? void 0 : k.url}")` : null,
                backgroundSize: (x = (S = (P = t.background) == null ? void 0 : P.size) == null ? void 0 : S[n]) == null ? void 0 : x.default,
                backgroundPositionX: l === "custom" ? u((z = (s = (C = t.background) == null ? void 0 : C.positionX) == null ? void 0 : s[n]) == null ? void 0 : z.default) : void 0,
                backgroundPositionY: l === "custom" ? u((R = (E = (X = t.background) == null ? void 0 : X.positionY) == null ? void 0 : E[n]) == null ? void 0 : R.default) : void 0,
                backgroundPosition: l === "custom" ? void 0 : l,
                backgroundRepeat: (D = (T = (I = t.background) == null ? void 0 : I.repeat) == null ? void 0 : T[n]) == null ? void 0 : D.default,
                color: (G = t.contentColor) == null ? void 0 : G.default,
                justifyContent: ((H = t.horizontalPosition) == null ? void 0 : H[n]) ?? ((L = o.horizontalPosition) == null ? void 0 : L[n]),
                alignItems: ((W = t.verticalPosition) == null ? void 0 : W[n]) ?? ((N = o.verticalPosition) == null ? void 0 : N[n]),
                "& .slide-content": {
                  textAlign: ((A = t.textAlign) == null ? void 0 : A.desktop) ?? ((U = o.textAlign) == null ? void 0 : U.desktop),
                  "& .title": {
                    color: ((F = (Y = (V = o.title) == null ? void 0 : V.color) == null ? void 0 : Y.desktop) == null ? void 0 : F.default) ?? ((M = t.contentColor) == null ? void 0 : M.default)
                  },
                  "& .description": {
                    color: ((q = (O = ($ = o.description) == null ? void 0 : $.color) == null ? void 0 : O.desktop) == null ? void 0 : q.default) ?? ((J = t.contentColor) == null ? void 0 : J.default)
                  }
                }
              };
            })
          }
        };
      },
      {}
    );
    return {
      width: "100%",
      "& .slider-wrapper": {
        position: "relative",
        "& .slick-list": {
          "& .slide-item": {
            display: "flex !important",
            width: "100%",
            position: "relative",
            "& .overlay": {
              position: "absolute",
              width: "100%",
              height: "100%",
              top: 0,
              left: 0,
              zIndex: 1
            },
            ...w(B, (e) => {
              var l, c;
              const {
                top: t,
                right: i,
                bottom: d,
                left: n
              } = io((l = o.sliderPadding) == null ? void 0 : l[e]);
              return {
                height: u((c = o.height) == null ? void 0 : c[e]),
                paddingTop: t,
                paddingRight: i,
                paddingBottom: d,
                paddingLeft: n
              };
            }),
            "& .slide-content": {
              position: "relative",
              zIndex: 2,
              ...w(B, (e) => {
                var t, i, d, n, l, c, f;
                return {
                  maxWidth: u((t = o.contentWidth) == null ? void 0 : t[e]),
                  "& .title": {
                    marginBottom: u((d = (i = o.title) == null ? void 0 : i.marginBottom) == null ? void 0 : d[e]),
                    ...K(e, (n = o.title) == null ? void 0 : n.typography)
                  },
                  "& .description": {
                    marginBottom: u(
                      (c = (l = o.description) == null ? void 0 : l.marginBottom) == null ? void 0 : c[e]
                    ),
                    ...K(
                      e,
                      (f = o.description) == null ? void 0 : f.typography
                    )
                  },
                  "& .btn": {
                    ...ao((r) => {
                      var p, v, m, h, g, y, b, k, P, S, x, C, s, z, X, E, R, I, T, D, G, H, L, W, N, A, U, V, Y, F, M, $, O, q, J, j, oo, to, eo;
                      return {
                        ...ho({
                          size: (v = (p = o.button) == null ? void 0 : p.size) == null ? void 0 : v[e]
                        }),
                        backgroundColor: ((h = (m = o.button) == null ? void 0 : m.background.type) == null ? void 0 : h[r]) === co.CLASSIC && ((y = (g = o.button) == null ? void 0 : g.background.color) != null && y[r]) ? (k = (b = o.button) == null ? void 0 : b.background.color) == null ? void 0 : k[r] : "transparent",
                        backgroundImage: po({
                          type: (S = (P = o.button) == null ? void 0 : P.background.type) == null ? void 0 : S[r],
                          color1: (s = (C = (x = o.button) == null ? void 0 : x.background.gradient) == null ? void 0 : C.color1) == null ? void 0 : s[r],
                          color2: (E = (X = (z = o.button) == null ? void 0 : z.background.gradient) == null ? void 0 : X.color2) == null ? void 0 : E[r],
                          location1: (T = (I = (R = o.button) == null ? void 0 : R.background.gradient) == null ? void 0 : I.location1) == null ? void 0 : T[r],
                          location2: (H = (G = (D = o.button) == null ? void 0 : D.background.gradient) == null ? void 0 : G.location2) == null ? void 0 : H[r],
                          angle: (N = (W = (L = o.button) == null ? void 0 : L.background.gradient) == null ? void 0 : W.angle) == null ? void 0 : N[r],
                          gradientType: (V = (U = (A = o.button) == null ? void 0 : A.background.gradient) == null ? void 0 : U.type) == null ? void 0 : V[r],
                          position: (M = (F = (Y = o.button) == null ? void 0 : Y.background.gradient) == null ? void 0 : F.position) == null ? void 0 : M[r]
                        }),
                        borderWidth: (O = ($ = o.button) == null ? void 0 : $.border.width) == null ? void 0 : O.value,
                        borderColor: ((J = (q = o.button) == null ? void 0 : q.border.color) == null ? void 0 : J[r]) ?? "#fff",
                        borderStyle: "solid",
                        borderRadius: u((j = o.button) == null ? void 0 : j.border.radius),
                        ...K(e, (oo = o.button) == null ? void 0 : oo.typography),
                        color: (eo = (to = o.button) == null ? void 0 : to.textColor) == null ? void 0 : eo[r]
                      };
                    }),
                    transition: "all 200ms ease-in-out"
                  }
                };
              })
            }
          },
          ...no
        },
        "& .arrow": {
          position: "absolute",
          display: "flex",
          justifyContent: "center",
          alignItems: "center",
          cursor: "pointer",
          transform: "translateY(-50%)",
          zIndex: 2,
          transition: "all 200ms ease-in-out",
          ...w(B, (e) => {
            var d, n, l, c, f, r, p, v, m, h;
            const t = (n = (d = o.navigation) == null ? void 0 : d.leftArrowPosition) == null ? void 0 : n[e], i = (c = (l = o.navigation) == null ? void 0 : l.rightArrowPosition) == null ? void 0 : c[e];
            return {
              width: u((r = (f = o.navigation) == null ? void 0 : f.arrowWidth) == null ? void 0 : r[e]),
              height: u((v = (p = o.navigation) == null ? void 0 : p.arrowHeight) == null ? void 0 : v[e]),
              fontSize: u((h = (m = o.navigation) == null ? void 0 : m.arrowSize) == null ? void 0 : h[e]) ?? "22px",
              ...ao((g) => {
                var y, b, k, P, S, x, C, s, z, X, E;
                return {
                  color: (k = (b = (y = o.navigation) == null ? void 0 : y.arrowColor) == null ? void 0 : b[e]) == null ? void 0 : k[g],
                  backgroundColor: (x = (S = (P = o.navigation) == null ? void 0 : P.arrowBackgroudColor) == null ? void 0 : S[e]) == null ? void 0 : x[g],
                  boxShadow: fo((s = (C = o.navigation) == null ? void 0 : C.arrowBoxShadow) == null ? void 0 : s[g]),
                  ...go(
                    (E = (X = (z = o.navigation) == null ? void 0 : z.arrowRadius) == null ? void 0 : X[e]) == null ? void 0 : E[g]
                  )
                };
              }),
              "&.arrow-left": {
                top: (t == null ? void 0 : t.top) ?? "50%",
                right: t == null ? void 0 : t.right,
                bottom: t == null ? void 0 : t.bottom,
                left: (t == null ? void 0 : t.left) ?? 0
              },
              "&.arrow-right": {
                top: (i == null ? void 0 : i.top) ?? "50%",
                right: (i == null ? void 0 : i.right) ?? 0,
                bottom: i == null ? void 0 : i.bottom,
                left: i == null ? void 0 : i.left
              }
            };
          })
        },
        "& .slick-dots": {
          position: "absolute",
          display: "flex !important",
          justifyContent: "center",
          alignItems: "center",
          listStyle: "none",
          padding: 0,
          margin: 0,
          zIndex: 2,
          height: "fit-content",
          width: "fit-content",
          ...w(B, (e) => {
            var i, d, n, l;
            const t = io((d = (i = o.navigation) == null ? void 0 : i.dotsPosition) == null ? void 0 : d[e]);
            return {
              gap: u((l = (n = o.navigation) == null ? void 0 : n.dotGap) == null ? void 0 : l[e]) ?? "15px",
              top: t.top,
              right: t.right,
              bottom: t.bottom ?? "10px",
              left: t.left ? t.left : t.right ? void 0 : "50%",
              transform: t.left || t.right ? void 0 : "translateX(-50%)"
            };
          }),
          "& > li": {
            ...w(B, (e) => {
              var t, i, d, n, l, c, f, r, p, v, m, h, g, y, b, k, P, S, x;
              return {
                margin: 0,
                display: "flex",
                justifyContent: "center",
                alignItems: "center",
                "& .dot": {
                  display: "block",
                  width: u((i = (t = o.navigation) == null ? void 0 : t.dotWidth) == null ? void 0 : i[e]) ?? "10px",
                  height: u((n = (d = o.navigation) == null ? void 0 : d.dotHeight) == null ? void 0 : n[e]) ?? "10px",
                  borderRadius: u((c = (l = o.navigation) == null ? void 0 : l.dotRadius) == null ? void 0 : c[e]) ?? "50%",
                  backgroundColor: (p = (r = (f = o.navigation) == null ? void 0 : f.dotColor) == null ? void 0 : r[e]) == null ? void 0 : p.default,
                  cursor: "pointer",
                  transition: "all 200ms ease-in-out"
                },
                "&:hover .dot": {
                  backgroundColor: (h = (m = (v = o.navigation) == null ? void 0 : v.dotActiveColor) == null ? void 0 : m[e]) == null ? void 0 : h.default
                },
                "&.slick-active .dot": {
                  backgroundColor: (b = (y = (g = o.navigation) == null ? void 0 : g.dotActiveColor) == null ? void 0 : y[e]) == null ? void 0 : b.default,
                  width: u((P = (k = o.navigation) == null ? void 0 : k.activeDotWidth) == null ? void 0 : P[e]) ?? "10px",
                  height: u((x = (S = o.navigation) == null ? void 0 : S.activeDotHeight) == null ? void 0 : x[e]) ?? "10px"
                }
              };
            })
          }
        }
      }
    };
  },
  controls: [
    {
      label: "Content",
      component: Q(() => import("./components/controls/slider-content.control.js"))
    },
    {
      label: "Style",
      component: Q(() => import("./components/controls/slider-style.control.js"))
    }
  ]
});
export {
  Xo as default
};
//# sourceMappingURL=slider.config.js.map
