import { jsx } from 'react/jsx-runtime';
import { Palette, Heading, Type, UnfoldHorizontal, Percent } from 'lucide-react';
import { TAILWIND_FLEX_DIRECTION_CLASSES, TAILWIND_ALIGN_ITEMS_CLASSES, TAILWIND_JUSTIFY_CONTENT_CLASSES, TAILWIND_GAP_CLASSES, TAILWIND_BOX_SHADOW_CLASSES, TAILWIND_TOP_MARGIN_CLASSES, TAILWIND_RIGHT_MARGIN_CLASSES, TAILWIND_BOTTOM_MARGIN_CLASSES, TAILWIND_LEFT_MARGIN_CLASSES, TAILWIND_HORIZONTAL_MARGIN_CLASSES, TAILWIND_VERTICAL_MARGIN_CLASSES, TAILWIND_MARGIN_CLASSES, TAILWIND_TOP_PADDING_CLASSES, TAILWIND_RIGHT_PADDING_CLASSES, TAILWIND_BOTTOM_PADDING_CLASSES, TAILWIND_LEFT_PADDING_CLASSES, TAILWIND_HORIZONTAL_PADDING_CLASSES, TAILWIND_VERTICAL_PADDING_CLASSES, TAILWIND_PADDING_CLASSES, TAILWIND_FONT_SIZE_CLASSES, TAILWIND_FONT_WEIGHT_CLASSES, TAILWIND_TEXT_ALIGN_CLASSES, TAILWIND_LINE_HEIGHT_CLASSES, TAILWIND_LETTER_SPACING_CLASSES, TAILWIND_OPACITY_CLASSES, TAILWIND_BORDER_WIDTH_CLASSES, TAILWIND_CORNER_RADIUS_CLASSES, TAILWIND_FIXED_HEIGHT_CLASSES, TAILWIND_PERCENTAGE_HEIGHT_CLASSES, TAILWIND_FIXED_WIDTH_CLASSES, TAILWIND_PERCENTAGE_WIDTH_CLASSES, TAILWIND_BOX_SHADOW_COLOR_CLASSES, SHADCN_TAILWIND_TEXT_COLOR_CLASSES, TAILWIND_TEXT_COLOR_CLASSES, TAILWIND_BACKGROUND_COLOR_CLASSES, SHADCN_TAILWIND_BACKGROUND_COLOR_CLASSES, SHADCN_TAILWIND_BORDER_COLOR_CLASSES, TAILWIND_BORDER_COLOR_CLASSES, TAILWIND_FLEX_WRAP_CLASSES, TAILWIND_DISPLAY_CLASSES, TAILWIND_AUTO_HEIGHT_CLASSES, TAILWIND_AUTO_WIDTH_CLASSES } from '../../utils/tailwind-classes.mjs';
import { ToggleGroup } from './toggle-group.mjs';
import { ShadowIcon, PaddingSideIcon, PaddingAxisIcon, PaddingIcon, LineHeightIcon, LetterSpacingIcon, OpacityIcon, BorderWidthIcon, CornerRadiusIcon, FillIcon, HugIcon, FixedIcon } from './icons.mjs';
import { filterClassnameArray } from './helpers.mjs';
import { THEME_AWARE_SHADOW_COLOR_ITEMS, THEME_AWARE_TEXT_COLOR_ITEMS, THEME_AWARE_BACKGROUND_COLOR_ITEMS, THEME_AWARE_BORDER_COLOR_ITEMS } from './theme-aware-config.mjs';

const CONFIG = {
  width: {
    label: "Width",
    possibleTypes: [
      null,
      ...filterClassnameArray(TAILWIND_AUTO_WIDTH_CLASSES, ["w-full", "w-max"]),
      ...TAILWIND_FIXED_WIDTH_CLASSES,
      ...TAILWIND_PERCENTAGE_WIDTH_CLASSES
    ],
    component: ToggleGroup,
    options: [
      { value: "w-full", tooltip: "Fill (w-full)", icon: /* @__PURE__ */ jsx(FillIcon, {}) },
      { value: "w-max", tooltip: "Hug (w-max)", icon: /* @__PURE__ */ jsx(HugIcon, {}) },
      {
        value: "_w-fixed",
        label: "Fixed",
        tooltip: "Fixed (w-*)",
        icon: /* @__PURE__ */ jsx(FixedIcon, {}),
        dropdown: {
          items: TAILWIND_FIXED_WIDTH_CLASSES.map((cls) => ({
            value: cls,
            label: cls.replace("w-", "")
          }))
        }
      },
      {
        value: "_w-percentage",
        label: "Percentage (w-*/*)",
        tooltip: "Percentage",
        icon: /* @__PURE__ */ jsx(Percent, { className: "!size-[14px]" }),
        dropdown: {
          items: TAILWIND_PERCENTAGE_WIDTH_CLASSES.map((cls) => ({
            value: cls,
            label: cls.replace("w-", "")
          }))
        }
      }
    ]
  },
  height: {
    label: "Height",
    possibleTypes: [
      null,
      ...filterClassnameArray(TAILWIND_AUTO_HEIGHT_CLASSES, ["h-full", "h-auto"]),
      ...TAILWIND_FIXED_HEIGHT_CLASSES,
      ...TAILWIND_PERCENTAGE_HEIGHT_CLASSES
    ],
    component: ToggleGroup,
    options: [
      { value: "h-full", tooltip: "Fill (h-full)", icon: /* @__PURE__ */ jsx(FillIcon, { className: "rotate-90" }) },
      { value: "h-auto", tooltip: "Hug (h-auto)", icon: /* @__PURE__ */ jsx(HugIcon, { className: "rotate-90" }) },
      {
        value: "_h-fixed",
        label: "Fixed",
        tooltip: "Fixed (h-*)",
        icon: /* @__PURE__ */ jsx(FixedIcon, { className: "rotate-90" }),
        dropdown: {
          items: TAILWIND_FIXED_HEIGHT_CLASSES.map((cls) => ({
            value: cls,
            label: cls.replace("h-", "")
          }))
        }
      },
      {
        value: "_h-percentage",
        label: "Percentage",
        tooltip: "Percentage  (h-*/*)",
        icon: /* @__PURE__ */ jsx(Percent, { className: "!size-[14px]" }),
        dropdown: {
          items: TAILWIND_PERCENTAGE_HEIGHT_CLASSES.map((cls) => ({
            value: cls,
            label: cls.replace("h-", "")
          }))
        }
      }
    ]
  },
  border: {
    label: "Border",
    possibleTypes: [
      null,
      ...SHADCN_TAILWIND_BORDER_COLOR_CLASSES,
      ...TAILWIND_BORDER_WIDTH_CLASSES,
      ...TAILWIND_BORDER_COLOR_CLASSES,
      ...TAILWIND_CORNER_RADIUS_CLASSES
    ],
    component: ToggleGroup,
    multiple: true,
    options: [
      {
        value: "_border-width",
        label: "Width",
        tooltip: "Border Width (border-*)",
        icon: /* @__PURE__ */ jsx(BorderWidthIcon, {}),
        dropdown: {
          items: TAILWIND_BORDER_WIDTH_CLASSES.map((cls) => ({
            value: cls,
            label: cls.replace("border-", "")
          }))
        }
      },
      {
        value: "_corner-radius",
        label: "Radius",
        tooltip: "Corner Radius (rounded-*)",
        icon: /* @__PURE__ */ jsx(CornerRadiusIcon, {}),
        dropdown: {
          items: TAILWIND_CORNER_RADIUS_CLASSES.map((cls) => ({
            value: cls,
            label: cls.replace("rounded-", "")
          }))
        }
      },
      {
        value: "_border-color",
        label: "Color",
        tooltip: "Border Color (border-*)",
        icon: /* @__PURE__ */ jsx(Palette, { className: "!size-[14px]" }),
        dropdown: {
          dropdownDisplay: "grid",
          items: THEME_AWARE_BORDER_COLOR_ITEMS
        }
      }
    ]
  },
  background: {
    label: "Fill & Opacity",
    possibleTypes: [
      null,
      ...TAILWIND_BACKGROUND_COLOR_CLASSES,
      ...SHADCN_TAILWIND_BACKGROUND_COLOR_CLASSES,
      ...TAILWIND_OPACITY_CLASSES
    ],
    component: ToggleGroup,
    multiple: true,
    options: [
      {
        value: "_bg-color",
        label: "Color",
        tooltip: "Background Color (bg-*)",
        icon: /* @__PURE__ */ jsx(Palette, { className: "!size-[14px]" }),
        dropdown: {
          dropdownDisplay: "grid",
          items: THEME_AWARE_BACKGROUND_COLOR_ITEMS
        }
      },
      {
        value: "_opacity",
        label: "Opacity",
        tooltip: "Opacity (opacity-*)",
        icon: /* @__PURE__ */ jsx(OpacityIcon, {}),
        dropdown: {
          items: TAILWIND_OPACITY_CLASSES.map((cls) => ({
            value: cls,
            label: cls.replace("opacity-", "")
          }))
        }
      }
    ]
  },
  typography: {
    label: "Typography",
    possibleTypes: [
      null,
      ...TAILWIND_FONT_SIZE_CLASSES,
      ...TAILWIND_FONT_WEIGHT_CLASSES,
      ...TAILWIND_LINE_HEIGHT_CLASSES,
      ...TAILWIND_LETTER_SPACING_CLASSES,
      ...TAILWIND_TEXT_ALIGN_CLASSES,
      ...SHADCN_TAILWIND_TEXT_COLOR_CLASSES,
      ...TAILWIND_TEXT_COLOR_CLASSES
    ],
    component: ToggleGroup,
    multiple: true,
    options: [
      {
        value: "_font-size",
        label: "Size",
        tooltip: "Font Size (text-*)",
        icon: /* @__PURE__ */ jsx(Heading, { className: "!size-[14px]" }),
        dropdown: {
          items: TAILWIND_FONT_SIZE_CLASSES.map((cls) => ({
            value: cls,
            label: cls.replace("text-", "")
          }))
        }
      },
      {
        value: "_font-weight",
        label: "Weight",
        tooltip: "Font Weight (font-*)",
        icon: /* @__PURE__ */ jsx(Type, { className: "!size-[14px]" }),
        dropdown: {
          items: TAILWIND_FONT_WEIGHT_CLASSES.map((cls) => ({
            value: cls,
            label: cls.replace("font-", "")
          }))
        }
      },
      {
        value: "_text-align",
        label: "Align",
        tooltip: "Text Align (text-*)",
        icon: /* @__PURE__ */ jsx(UnfoldHorizontal, { className: "!size-[14px]" }),
        dropdown: {
          items: TAILWIND_TEXT_ALIGN_CLASSES.map((cls) => ({
            value: cls,
            label: cls.replace("text-", "")
          }))
        }
      },
      {
        value: "_text-color",
        label: "Color",
        tooltip: "Text Color (text-*)",
        icon: /* @__PURE__ */ jsx(Palette, { className: "!size-[14px]" }),
        dropdown: {
          dropdownDisplay: "grid",
          items: THEME_AWARE_TEXT_COLOR_ITEMS
        }
      },
      {
        value: "_line-height",
        label: "Line Height",
        tooltip: "Line Height (leading-*)",
        icon: /* @__PURE__ */ jsx(LineHeightIcon, {}),
        dropdown: {
          items: TAILWIND_LINE_HEIGHT_CLASSES.map((cls) => ({
            value: cls,
            label: cls.replace("leading-", "")
          }))
        }
      },
      {
        value: "_letter-spacing",
        label: "Letter Spacing",
        tooltip: "Letter Spacing (tracking-*)",
        icon: /* @__PURE__ */ jsx(LetterSpacingIcon, {}),
        dropdown: {
          items: TAILWIND_LETTER_SPACING_CLASSES.map((cls) => ({
            value: cls,
            label: cls.replace("tracking-", "")
          }))
        }
      }
    ]
  },
  padding: {
    label: "Padding",
    possibleTypes: [null, ...TAILWIND_PADDING_CLASSES],
    component: ToggleGroup,
    options: [
      {
        value: "_p",
        label: "All",
        tooltip: "All Padding (p-*)",
        icon: /* @__PURE__ */ jsx(PaddingIcon, {}),
        dropdown: {
          items: TAILWIND_PADDING_CLASSES.map((cls) => ({
            value: cls,
            label: cls.replace("p-", "")
          }))
        }
      }
    ]
  },
  directionalPadding: {
    label: "X and Y Padding",
    possibleTypes: [
      null,
      ...TAILWIND_HORIZONTAL_PADDING_CLASSES,
      ...TAILWIND_VERTICAL_PADDING_CLASSES
    ],
    component: ToggleGroup,
    options: [
      {
        value: "_p-horizontal",
        label: "Horizontal",
        tooltip: "Horizontal Padding (px-*)",
        icon: /* @__PURE__ */ jsx(PaddingAxisIcon, { axis: "x" }),
        dropdown: {
          items: TAILWIND_HORIZONTAL_PADDING_CLASSES.map((cls) => ({
            value: cls,
            label: cls.replace("px-", "")
          }))
        }
      },
      {
        value: "_p-vertical",
        label: "Vertical",
        tooltip: "Vertical Padding (py-*)",
        icon: /* @__PURE__ */ jsx(PaddingAxisIcon, { axis: "y" }),
        dropdown: {
          items: TAILWIND_VERTICAL_PADDING_CLASSES.map((cls) => ({
            value: cls,
            label: cls.replace("py-", "")
          }))
        }
      }
    ]
  },
  individualPadding: {
    label: "Individual Padding",
    possibleTypes: [
      null,
      ...TAILWIND_TOP_PADDING_CLASSES,
      ...TAILWIND_RIGHT_PADDING_CLASSES,
      ...TAILWIND_BOTTOM_PADDING_CLASSES,
      ...TAILWIND_LEFT_PADDING_CLASSES
    ],
    component: ToggleGroup,
    options: [
      {
        value: "_pt",
        label: "Top",
        tooltip: "Top Padding (pt-*)",
        icon: /* @__PURE__ */ jsx(PaddingSideIcon, { side: "top" }),
        dropdown: {
          items: TAILWIND_TOP_PADDING_CLASSES.map((cls) => ({
            value: cls,
            label: cls.replace("pt-", "")
          }))
        }
      },
      {
        value: "_pr",
        label: "Right",
        tooltip: "Right Padding (pr-*)",
        icon: /* @__PURE__ */ jsx(PaddingSideIcon, { side: "right" }),
        dropdown: {
          items: TAILWIND_RIGHT_PADDING_CLASSES.map((cls) => ({
            value: cls,
            label: cls.replace("pr-", "")
          }))
        }
      },
      {
        value: "_pb",
        label: "Bottom",
        tooltip: "Bottom Padding (pb-*)",
        icon: /* @__PURE__ */ jsx(PaddingSideIcon, { side: "bottom" }),
        dropdown: {
          items: TAILWIND_BOTTOM_PADDING_CLASSES.map((cls) => ({
            value: cls,
            label: cls.replace("pb-", "")
          }))
        }
      },
      {
        value: "_pl",
        label: "Left",
        tooltip: "Left Padding (pl-*)",
        icon: /* @__PURE__ */ jsx(PaddingSideIcon, { side: "left" }),
        dropdown: {
          items: TAILWIND_LEFT_PADDING_CLASSES.map((cls) => ({
            value: cls,
            label: cls.replace("pl-", "")
          }))
        }
      }
    ]
  },
  margin: {
    label: "Margin",
    possibleTypes: [null, ...TAILWIND_MARGIN_CLASSES],
    component: ToggleGroup,
    options: [
      {
        value: "_m",
        label: "All",
        tooltip: "All Margin (m-*)",
        icon: /* @__PURE__ */ jsx(PaddingIcon, {}),
        dropdown: {
          items: TAILWIND_MARGIN_CLASSES.map((cls) => ({
            value: cls,
            label: cls.replace("m-", "")
          }))
        }
      }
    ]
  },
  directionalMargin: {
    label: "X and Y Margin",
    possibleTypes: [
      null,
      ...TAILWIND_HORIZONTAL_MARGIN_CLASSES,
      ...TAILWIND_VERTICAL_MARGIN_CLASSES
    ],
    component: ToggleGroup,
    options: [
      {
        value: "_m-horizontal",
        label: "Horizontal",
        tooltip: "Horizontal Margin (mx-*)",
        icon: /* @__PURE__ */ jsx(PaddingAxisIcon, { axis: "x" }),
        dropdown: {
          items: TAILWIND_HORIZONTAL_MARGIN_CLASSES.map((cls) => ({
            value: cls,
            label: cls.replace("mx-", "")
          }))
        }
      },
      {
        value: "_m-vertical",
        label: "Vertical",
        tooltip: "Vertical Margin (my-*)",
        icon: /* @__PURE__ */ jsx(PaddingAxisIcon, { axis: "y" }),
        dropdown: {
          items: TAILWIND_VERTICAL_MARGIN_CLASSES.map((cls) => ({
            value: cls,
            label: cls.replace("my-", "")
          }))
        }
      }
    ]
  },
  individualMargin: {
    label: "Individual Margin",
    possibleTypes: [
      null,
      ...TAILWIND_TOP_MARGIN_CLASSES,
      ...TAILWIND_RIGHT_MARGIN_CLASSES,
      ...TAILWIND_BOTTOM_MARGIN_CLASSES,
      ...TAILWIND_LEFT_MARGIN_CLASSES
    ],
    component: ToggleGroup,
    options: [
      {
        value: "_mt",
        label: "Top",
        tooltip: "Top Margin (mt-*)",
        icon: /* @__PURE__ */ jsx(PaddingSideIcon, { side: "top" }),
        dropdown: {
          items: TAILWIND_TOP_MARGIN_CLASSES.map((cls) => ({
            value: cls,
            label: cls.replace("mt-", "")
          }))
        }
      },
      {
        value: "_mr",
        label: "Right",
        tooltip: "Right Margin (mr-*)",
        icon: /* @__PURE__ */ jsx(PaddingSideIcon, { side: "right" }),
        dropdown: {
          items: TAILWIND_RIGHT_MARGIN_CLASSES.map((cls) => ({
            value: cls,
            label: cls.replace("mr-", "")
          }))
        }
      },
      {
        value: "_mb",
        label: "Bottom",
        tooltip: "Bottom Margin (mb-*)",
        icon: /* @__PURE__ */ jsx(PaddingSideIcon, { side: "bottom" }),
        dropdown: {
          items: TAILWIND_BOTTOM_MARGIN_CLASSES.map((cls) => ({
            value: cls,
            label: cls.replace("mb-", "")
          }))
        }
      },
      {
        value: "_ml",
        label: "Left",
        tooltip: "Left Margin (ml-*)",
        icon: /* @__PURE__ */ jsx(PaddingSideIcon, { side: "left" }),
        dropdown: {
          items: TAILWIND_LEFT_MARGIN_CLASSES.map((cls) => ({
            value: cls,
            label: cls.replace("ml-", "")
          }))
        }
      }
    ]
  },
  boxShadow: {
    label: "Box Shadow",
    possibleTypes: [
      null,
      ...TAILWIND_BOX_SHADOW_CLASSES,
      ...TAILWIND_BOX_SHADOW_COLOR_CLASSES
    ],
    component: ToggleGroup,
    multiple: true,
    options: [
      {
        value: "_shadow",
        label: "Shadow",
        tooltip: "Box Shadow (shadow-*)",
        icon: /* @__PURE__ */ jsx(ShadowIcon, {}),
        dropdown: {
          items: TAILWIND_BOX_SHADOW_CLASSES.map((cls) => ({
            value: cls,
            label: cls.replace("shadow-", "")
          }))
        }
      },
      {
        value: "_shadow-color",
        label: "Color",
        tooltip: "Box Shadow Color (shadow-*)",
        icon: /* @__PURE__ */ jsx(Palette, { className: "!size-[14px]" }),
        dropdown: {
          dropdownDisplay: "grid",
          items: THEME_AWARE_SHADOW_COLOR_ITEMS
        }
      }
    ]
  },
  display: {
    label: "Layout",
    possibleTypes: [
      null,
      ...filterClassnameArray(TAILWIND_DISPLAY_CLASSES, ["block", "inline", "flex"])
    ],
    component: ToggleGroup,
    options: [
      { value: "block", tooltip: "Block", label: "Block" },
      { value: "inline", tooltip: "Inline", label: "Inline" },
      { value: "flex", tooltip: "Flex Box", label: "Flex Box" }
    ]
  },
  flexSettings: {
    label: "Flex Settings",
    possibleTypes: [
      null,
      ...TAILWIND_FLEX_DIRECTION_CLASSES,
      ...TAILWIND_ALIGN_ITEMS_CLASSES,
      ...TAILWIND_JUSTIFY_CONTENT_CLASSES,
      ...TAILWIND_GAP_CLASSES,
      ...filterClassnameArray(TAILWIND_FLEX_WRAP_CLASSES, ["flex-wrap", "flex-nowrap", "flex-wrap-reverse"])
    ],
    component: ToggleGroup,
    multiple: true,
    options: [
      {
        value: "_flex-direction",
        label: "Direction",
        tooltip: "Flex Direction",
        dropdown: {
          items: TAILWIND_FLEX_DIRECTION_CLASSES.map((cls) => ({
            value: cls,
            label: cls.replace("flex-", "")
          }))
        }
      },
      {
        value: "_align",
        label: "Align",
        tooltip: "Align Items",
        dropdown: {
          items: TAILWIND_ALIGN_ITEMS_CLASSES.map((cls) => ({
            value: cls,
            label: cls.replace("items-", "")
          }))
        }
      },
      {
        value: "_justify",
        label: "Justify",
        tooltip: "Justify Content",
        dropdown: {
          items: TAILWIND_JUSTIFY_CONTENT_CLASSES.map((cls) => ({
            value: cls,
            label: cls.replace("justify-", "")
          }))
        }
      },
      {
        value: "_gap",
        label: "Gap",
        tooltip: "Gap",
        dropdown: {
          items: TAILWIND_GAP_CLASSES.map((cls) => ({
            value: cls,
            label: cls.replace("gap-", "")
          }))
        }
      },
      {
        value: "_wrap",
        label: "Wrap",
        tooltip: "Wrap",
        dropdown: {
          items: [
            { value: "flex-wrap", label: "wrap" },
            { value: "flex-nowrap", label: "nowrap" },
            { value: "flex-wrap-reverse", label: "wrap-reverse" }
          ]
        }
      }
    ]
  }
};
const LAYOUT_GROUPS = [
  {
    label: "Padding",
    keys: ["padding", "directionalPadding", "individualPadding"],
    clearState: () => [
      ...TAILWIND_PADDING_CLASSES,
      ...TAILWIND_HORIZONTAL_PADDING_CLASSES,
      ...TAILWIND_VERTICAL_PADDING_CLASSES,
      ...TAILWIND_TOP_PADDING_CLASSES,
      ...TAILWIND_RIGHT_PADDING_CLASSES,
      ...TAILWIND_BOTTOM_PADDING_CLASSES,
      ...TAILWIND_LEFT_PADDING_CLASSES
    ]
  },
  {
    label: "Margin",
    keys: ["margin", "directionalMargin", "individualMargin"],
    clearState: () => [
      ...TAILWIND_MARGIN_CLASSES,
      ...TAILWIND_HORIZONTAL_MARGIN_CLASSES,
      ...TAILWIND_VERTICAL_MARGIN_CLASSES,
      ...TAILWIND_TOP_MARGIN_CLASSES,
      ...TAILWIND_RIGHT_MARGIN_CLASSES,
      ...TAILWIND_BOTTOM_MARGIN_CLASSES,
      ...TAILWIND_LEFT_MARGIN_CLASSES
    ]
  }
];
const LAYOUT_ORDER = [
  { type: "item", key: "width" },
  { type: "item", key: "height" },
  { type: "group", label: "Margin", className: "w-fit mr-2" },
  { type: "group", label: "Padding", className: "w-fit" },
  { type: "item", key: "display" },
  {
    type: "item",
    key: "flexSettings",
    isVisible: (state) => state.display === "flex"
  },
  { type: "item", key: "typography" },
  { type: "item", key: "background" },
  { type: "item", key: "border", className: "w-fit mr-2" },
  { type: "item", key: "boxShadow", className: "w-fit" }
];

export { CONFIG, LAYOUT_GROUPS, LAYOUT_ORDER };
