"use client";
'use strict';

const jsxRuntime = require('react/jsx-runtime');
const React = require('react');
const baseColors = require('./utils/base-colors.cjs');
const button = require('../../button.cjs');
const label = require('../../label.cjs');
const LucideIcons = require('lucide-react');
const utils = require('../../../lib/utils.cjs');
const layerStore = require('../../../lib/ui-builder/store/layer-store.cjs');
const toggle = require('../../toggle.cjs');

const RESET_THEME_PROPS = {
  style: void 0,
  "data-mode": void 0,
  "data-color-theme": void 0,
  "data-border-radius": void 0
};
function TailwindThemePanel() {
  const {
    selectedPageId,
    updateLayer: updateLayerProps,
    findLayerById
  } = layerStore.useLayerStore();
  const selectedPageData = findLayerById(selectedPageId);
  const [isCustomTheme, setIsCustomTheme] = React.useState(
    selectedPageData?.props["data-color-theme"] !== void 0
  );
  React.useEffect(() => {
    if (!isCustomTheme) {
      updateLayerProps(selectedPageId, RESET_THEME_PROPS);
    }
  }, [isCustomTheme, selectedPageId, updateLayerProps]);
  const handleOnToggle = React.useCallback(() => {
    setIsCustomTheme(!isCustomTheme);
  }, [isCustomTheme]);
  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4 mt-4", children: [
    /* @__PURE__ */ jsxRuntime.jsx(
      toggle.Toggle,
      {
        variant: "outline",
        onPressedChange: handleOnToggle,
        "aria-label": "Toggle italic",
        children: isCustomTheme ? "Use Default Theme" : "Use Custom Theme"
      }
    ),
    !isCustomTheme && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-2", children: [
      /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.InfoIcon, { className: "size-4" }),
      " Using Your Project's Theme"
    ] }),
    selectedPageData && isCustomTheme && /* @__PURE__ */ jsxRuntime.jsx(ThemePicker, { isDisabled: !isCustomTheme, pageLayer: selectedPageData }, selectedPageId)
  ] });
}
function ThemePicker({
  className,
  isDisabled,
  pageLayer
}) {
  const { updateLayer: updateLayerProps } = layerStore.useLayerStore();
  const colorThemeValue = pageLayer.props?.["data-color-theme"];
  const modeValue = pageLayer.props?.["data-mode"];
  const borderRadiusValue = pageLayer.props?.borderRadius;
  const [colorTheme, setColorTheme] = React.useState(
    typeof colorThemeValue === "string" ? colorThemeValue : "red"
  );
  const [borderRadius, setBorderRadius] = React.useState(
    typeof borderRadiusValue === "number" ? borderRadiusValue : 0.5
  );
  const [mode, setMode] = React.useState(
    typeof modeValue === "string" ? modeValue : "light"
  );
  React.useEffect(() => {
    if (isDisabled) return;
    const colorThemeData = baseColors.baseColors.find((color) => color.name === colorTheme);
    if (colorThemeData) {
      const colorDataWithBorder = {
        ...colorThemeData,
        cssVars: {
          ...colorThemeData.cssVars,
          [mode]: {
            ...colorThemeData.cssVars[mode],
            radius: `${borderRadius}rem`
          }
        }
      };
      const themeStyle = themeToStyleVars(colorDataWithBorder.cssVars[mode]);
      updateLayerProps(pageLayer.id, {
        style: themeStyle,
        "data-mode": mode,
        "data-color-theme": colorTheme,
        "data-border-radius": borderRadius
      });
    }
  }, [pageLayer.id, updateLayerProps, colorTheme, borderRadius, mode, isDisabled]);
  const colorOptions = React.useMemo(() => baseColors.baseColors.map((color) => {
    return /* @__PURE__ */ jsxRuntime.jsx(
      ThemeColorOption,
      {
        color,
        colorTheme,
        mode,
        onClick: setColorTheme
      },
      color.name
    );
  }), [colorTheme, mode]);
  const borderRadiusOptions = React.useMemo(() => [0, 0.15, 0.3, 0.5, 0.75, 1].map((radius) => {
    return /* @__PURE__ */ jsxRuntime.jsx(
      ThemeBorderRadiusOption,
      {
        radius,
        borderRadius,
        onClick: setBorderRadius
      },
      radius
    );
  }), [borderRadius, setBorderRadius]);
  const modeOptions = React.useMemo(() => ["light", "dark"].map((modeOption) => {
    return /* @__PURE__ */ jsxRuntime.jsx(
      ThemeModeOption,
      {
        mode,
        modeOption,
        onClick: setMode
      },
      modeOption
    );
  }), [mode, setMode]);
  return /* @__PURE__ */ jsxRuntime.jsxs(
    "div",
    {
      className: utils.cn(
        "flex flex-col gap-2",
        className,
        isDisabled && "opacity-30 pointer-events-none"
      ),
      children: [
        /* @__PURE__ */ jsxRuntime.jsx(label.Label, { className: "mt-2", children: "Colors" }),
        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex gap-2 flex-wrap", children: colorOptions }),
        /* @__PURE__ */ jsxRuntime.jsx(label.Label, { className: "mt-2", children: "Border Radius" }),
        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex gap-2 flex-wrap", children: borderRadiusOptions }),
        /* @__PURE__ */ jsxRuntime.jsx(label.Label, { className: "mt-2", children: "Mode" }),
        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex gap-2", children: modeOptions })
      ]
    }
  );
}
function ThemeColorOption({ color, colorTheme, mode, onClick }) {
  const handleOnClick = React.useCallback(() => {
    onClick(color.name);
  }, [onClick, color.name]);
  const style = React.useMemo(() => ({
    backgroundColor: `hsl(${color.activeColor[mode === "dark" ? "dark" : "light"]})`
  }), [color.activeColor, mode]);
  return /* @__PURE__ */ jsxRuntime.jsxs(
    button.Button,
    {
      variant: "outline",
      size: "sm",
      className: utils.cn(
        "gap-2",
        color.name === colorTheme && "border-primary border-2"
      ),
      onClick: handleOnClick,
      children: [
        /* @__PURE__ */ jsxRuntime.jsx(
          "div",
          {
            className: "size-4 rounded-full",
            style,
            children: color.name === colorTheme && /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.CheckIcon, { className: "size-4" })
          }
        ),
        color.label
      ]
    },
    color.name
  );
}
function ThemeBorderRadiusOption({ radius, borderRadius, onClick }) {
  const handleOnClick = React.useCallback(() => {
    onClick(radius);
  }, [onClick, radius]);
  const style = React.useMemo(() => ({
    borderRadius: `${radius}rem`
  }), [radius]);
  return /* @__PURE__ */ jsxRuntime.jsxs(
    button.Button,
    {
      variant: "outline",
      size: "sm",
      className: utils.cn(
        "gap-2",
        radius === borderRadius && "border-primary border-2"
      ),
      onClick: handleOnClick,
      children: [
        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "size-6 rounded-sm bg-secondary overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(
          "div",
          {
            className: "size-10 ml-2 mt-2 border-2 border-secondary-foreground",
            style
          }
        ) }),
        radius
      ]
    },
    radius
  );
}
function ThemeModeOption({ modeOption, mode, onClick }) {
  const handleOnClick = React.useCallback(() => {
    onClick(modeOption);
  }, [onClick, modeOption]);
  return /* @__PURE__ */ jsxRuntime.jsxs(
    button.Button,
    {
      variant: "outline",
      size: "sm",
      onClick: handleOnClick,
      className: utils.cn(mode === modeOption && "border-2 border-primary"),
      children: [
        modeOption === "light" ? /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.SunIcon, { className: "mr-1 -translate-x-1" }) : /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.MoonIcon, { className: "mr-1 -translate-x-1" }),
        modeOption
      ]
    },
    modeOption
  );
}
function themeToStyleVars(colors) {
  if (!colors) {
    return void 0;
  }
  const styleVariables = {};
  Object.entries(colors).forEach(([key, value]) => {
    styleVariables[`--${key}`] = value;
  });
  baseColors.TAILWIND_V4_COLOR_KEYS.forEach((key) => {
    const value = colors[key];
    if (value) {
      styleVariables[`--color-${key}`] = `hsl(${value})`;
    }
  });
  const radiusValue = colors.radius;
  if (radiusValue) {
    styleVariables["--radius-lg"] = radiusValue;
    styleVariables["--radius-md"] = `calc(${radiusValue} - 2px)`;
    styleVariables["--radius-sm"] = `calc(${radiusValue} - 4px)`;
  }
  const globalOverrides = {
    color: `hsl(${colors.foreground})`,
    borderColor: `hsl(${colors.border})`,
    backgroundColor: `hsl(${colors.background})`
  };
  return { ...styleVariables, ...globalOverrides };
}

exports.TailwindThemePanel = TailwindThemePanel;
