import {generateHelpers} from "./utils.js";

// Common values
const colorsValues = {
    white: "#fff",
    black: "#000",
    current: "currentColor",
    transparent: "transparent",
};
const sizesValues = {
    none: "0px",
    one: "1px",
    half: "50%",
    full: "100%",
};

// Build helpers
export const helpers = {
    // Colors
    backgroundColor: generateHelpers({
        prefix: "has",
        shortcut: "bg",
        properties: ["backgroundColor"],
        states: ["default", "hover", "focus"],
        responsive: false,
        scale: "colors",
        values: colorsValues,
    }),
    textColor: generateHelpers({
        prefix: "has",
        shortcut: "text",
        properties: ["color"],
        states: ["default", "hover", "focus"],
        responsive: false,
        scale: "colors",
        values: colorsValues,
    }),
    // Font
    // font: generateHelpers({
    //     prefix: "has",
    //     shortcut: "font",
    //     properties: ["fontFamily"],
    //     states: ["default"],
    //     responsive: false,
    //     scale: "fonts",
    // }),
    // Font sizes
    fontSize: generateHelpers({
        prefix: "has",
        shortcut: "size",
        properties: ["fontSize"],
        states: ["default"],
        responsive: false,
        scale: "fontSizes",
    }),
    // Font weights
    fontWeight: generateHelpers({
        prefix: "has",
        shortcut: "weight",
        properties: ["fontWeight"],
        states: ["default"],
        values: {
            light: "300",
            normal: "400",
            medium: "500",
            bold: "700",
            black: "900",
        },
    }),
    // Line heights
    lineHeight: generateHelpers({
        prefix: "has",
        shortcut: "lh",
        properties: ["lineHeight"],
        states: ["default"],
        responsive: false,
        values: {
            none: "1",
            tight: "1.25",
            normal: "1.5",
            loose: "2",
        },
    }),
    // Opacities
    opacity: generateHelpers({
        prefix: "has",
        shortcut: "opacity",
        properties: ["opacity"],
        states: ["default", "hover"],
        responsive: false,
        scale: "opacities",
    }),
    // Radius
    radius: generateHelpers({
        prefix: "has",
        shortcut: "radius",
        properties: ["borderRadius"],
        states: ["default"],
        responsive: false,
        scale: "radius",
    }),
    // Shadows
    shadow: generateHelpers({
        prefix: "has",
        shortcut: "shadow",
        properties: ["boxShadow"],
        states: ["default"],
        responsive: false,
        scale: "shadows",
    }),
    // Sizes
    width: generateHelpers({
        prefix: "has",
        shortcut: "w",
        properties: ["width"],
        states: ["default"],
        responsive: true,
        scale: "sizes",
        values: {
            ...sizesValues,
            auto: "auto",
            screen: "100vw",
        },
    }),
    minWidth: generateHelpers({
        prefix: "has",
        shortcut: "minw",
        properties: ["min-width"],
        states: ["default"],
        responsive: true,
        scale: "sizes",
        values: {
            ...sizesValues,
            auto: "auto",
            screen: "100vw",
        },
    }),
    maxWidth: generateHelpers({
        prefix: "has",
        shortcut: "maxw",
        properties: ["max-width"],
        states: ["default"],
        responsive: true,
        scale: "sizes",
        values: {
            ...sizesValues,
            auto: "auto",
            screen: "100vw",
        },
    }),
    height: generateHelpers({
        prefix: "has",
        shortcut: "h",
        properties: ["height"],
        states: ["default"],
        responsive: true,
        scale: "sizes",
        values: {
            ...sizesValues,
            auto: "auto",
            screen: "100vh",
        },
    }),
    minHeight: generateHelpers({
        prefix: "has",
        shortcut: "minh",
        properties: ["min-height"],
        states: ["default"],
        responsive: true,
        scale: "sizes",
        values: {
            ...sizesValues,
            auto: "auto",
            screen: "100vh",
        },
    }),
    maxHeight: generateHelpers({
        prefix: "has",
        shortcut: "maxh",
        properties: ["max-height"],
        states: ["default"],
        responsive: true,
        scale: "sizes",
        values: {
            ...sizesValues,
            auto: "auto",
            screen: "100vh",
        },
    }),
    size: generateHelpers({
        prefix: "has",
        shortcut: "s",
        properties: ["height", "width"],
        states: ["default"],
        responsive: true,
        scale: "sizes",
        values: sizesValues,
    }),
    // Position
    ...Object.fromEntries(["bottom","left","right","top"].map(position => {
        return [position, generateHelpers({
            prefix: "has",
            shortcut: position,
            properties: [position],
            states: ["default"],
            responsive: true,
            values: sizesValues,
        })];
    })),
    // spacing
    padding: generateHelpers({
        prefix: "has",
        shortcut: "p",
        properties: ["padding"],
        states: ["default"],
        responsive: true,
        scale: "space",
        values: {
            ...sizesValues,
            auto: "auto",
        },
    }),
    paddingX: generateHelpers({
        prefix: "has",
        shortcut: "px",
        properties: ["padding-left", "padding-right"],
        states: ["default"],
        responsive: true,
        scale: "space",
        values: {
            ...sizesValues,
            auto: "auto",
        },
    }),
    paddingY: generateHelpers({
        prefix: "has",
        shortcut: "py",
        properties: ["padding-top", "padding-bottom"],
        states: ["default"],
        responsive: true,
        scale: "space",
        values: {
            ...sizesValues,
            auto: "auto",
        },
    }),
    paddingTop: generateHelpers({
        prefix: "has",
        shortcut: "pt",
        properties: ["padding-top"],
        states: ["default"],
        responsive: true,
        scale: "space",
        values: {
            ...sizesValues,
            auto: "auto",
        },
    }),
    paddingBottom: generateHelpers({
        prefix: "has",
        shortcut: "pb",
        properties: ["padding-bottom"],
        states: ["default"],
        responsive: true,
        scale: "space",
        values: {
            ...sizesValues,
            auto: "auto",
        },
    }),
    paddingLeft: generateHelpers({
        prefix: "has",
        shortcut: "pl",
        properties: ["padding-left"],
        states: ["default"],
        responsive: true,
        scale: "space",
        values: {
            ...sizesValues,
            auto: "auto",
        },
    }),
    paddingRight: generateHelpers({
        prefix: "has",
        shortcut: "pr",
        properties: ["padding-right"],
        states: ["default"],
        responsive: true,
        scale: "space",
        values: {
            ...sizesValues,
            auto: "auto",
        },
    }),
    margin: generateHelpers({
        prefix: "has",
        shortcut: "m",
        properties: ["margin"],
        states: ["default"],
        responsive: true,
        scale: "space",
        values: {
            ...sizesValues,
            auto: "auto",
        },
    }),
    marginX: generateHelpers({
        prefix: "has",
        shortcut: "mx",
        properties: ["margin-left", "margin-right"],
        states: ["default"],
        responsive: true,
        scale: "space",
        values: {
            ...sizesValues,
            auto: "auto",
        },
    }),
    marginY: generateHelpers({
        prefix: "has",
        shortcut: "my",
        properties: ["margin-top", "margin-bottom"],
        states: ["default"],
        responsive: true,
        scale: "space",
        values: {
            ...sizesValues,
            auto: "auto",
        },
    }),
    marginTop: generateHelpers({
        prefix: "has",
        shortcut: "mt",
        properties: ["margin-top"],
        states: ["default"],
        responsive: true,
        scale: "space",
        values: {
            ...sizesValues,
            auto: "auto",
        },
    }),
    marginBottom: generateHelpers({
        prefix: "has",
        shortcut: "mb",
        properties: ["margin-bottom"],
        states: ["default"],
        responsive: true,
        scale: "space",
        values: {
            ...sizesValues,
            auto: "auto",
        },
    }),
    marginLeft: generateHelpers({
        prefix: "has",
        shortcut: "ml",
        properties: ["margin-left"],
        states: ["default"],
        responsive: true,
        scale: "space",
        values: {
            ...sizesValues,
            auto: "auto",
        },
    }),
    marginRight: generateHelpers({
        prefix: "has",
        shortcut: "mr",
        properties: ["margin-right"],
        states: ["default"],
        responsive: true,
        scale: "space",
        values: {
            ...sizesValues,
            auto: "auto",
        },
    }),
    // Flexbox
    flex: generateHelpers({
        prefix: "has",
        shortcut: "flex",
        states: ["default"],
        responsive: true,
        properties: ["flex"],
        values: {
            "none": "none",
            "initial": "initial",
            "auto": "auto",
        },
    }),
    flexDirection: generateHelpers({
        prefix: "has",
        shortcut: "direction",
        states: ["default"],
        responsive: true,
        properties: ["flex-direction"],
        values: {
            "row": "row", 
            "column": "column", 
            "row-rev": "row-reverse", 
            "column-rev": "column-reverse",
        },
    }),
    flexGrow: generateHelpers({
        prefix: "has",
        shortcut: "flex",
        states: ["default"],
        responsive: true,
        properties: ["flex-grow"],
        values: {
            "grow": "1",
            "no-grow": "0",
        },
    }),
    flexShrink: generateHelpers({
        prefix: "has",
        shortcut: "flex",
        states: ["default"],
        responsive: true,
        properties: ["flex-shrink"],
        values: {
            "shrink": "1",
            "no-shrink": "0",
        },
    }),
    flexWrap: generateHelpers({
        prefix: "has",
        shortcut: "flex",
        states: ["default"],
        responsive: true,
        properties: ["flex-wrap"],
        values: {
            "wrap": "wrap",
            "wrap-rev": "wrap-reverse",
            "no-wrap": "nowrap",
        },
    }),
    alignContent: generateHelpers({
        prefix: "has",
        shortcut: "content",
        states: ["default"],
        responsive: true,
        properties: ["align-content"],
        values: {
            start: "flex-start",
            end: "flex-end",
            center: "center",
            between: "space-between",
            around: "space-around",
            evenly: "space-evenly",
        },
    }),
    alignItems: generateHelpers({
        prefix: "has",
        shortcut: "items",
        states: ["default"],
        responsive: true,
        properties: ["align-items"],
        values: {
            start: "flex-start",
            end: "flex-end",
            center: "center",
            stretch: "stretch",
            baseline: "baseline",
        },
    }),
    alignSelf: generateHelpers({
        prefix: "has",
        shortcut: "self",
        states: ["default"],
        responsive: true,
        properties: ["align-self"],
        values: {
            auto: "auto",
            start: "flex-start",
            end: "flex-end",
            center: "center",
            stretch: "stretch",
            baseline: "baseline",
        },
    }),
    justifyContent: generateHelpers({
        prefix: "has",
        shortcut: "justify",
        states: ["default"],
        responsive: true,
        properties: ["justify-content"],
        values: {
            start: "flex-start",
            end: "flex-end",
            center: "center",
            between: "space-between",
            around: "space-around",
            evenly: "space-evenly",
        },
    }),
    justifyItems: generateHelpers({
        prefix: "has",
        shortcut: "justify-items",
        states: ["default"],
        responsive: true,
        properties: ["justify-items"],
        values: {
            start: "start",
            end: "end",
            center: "center",
            stretch: "stretch",
        },
    }),
    justifySelf: generateHelpers({
        prefix: "has",
        shortcut: "justify-self",
        states: ["default"],
        responsive: true,
        properties: ["justify-self"],
        values: {
            auto: "auto",
            start: "start",
            end: "end",
            center: "center",
            stretch: "stretch",
        },
    }),
    order: generateHelpers({
        prefix: "has",
        shortcut: "order",
        states: ["default"],
        responsive: true,
        properties: ["order"],
        values: {
            none: "0",
            first: "-999",
            last: "999",
        },
    }),
    // Text
    textAlign: generateHelpers({
        prefix: "has",
        shortcut: "text",
        states: ["default"],
        responsive: false,
        properties: ["text-align"],
        values: {
            justified: "justify", 
            left: "left", 
            center: "center", 
            right: "right",
        },
    }),
    // Vertical align
    verticalAlign: generateHelpers({
        prefix: "has",
        shortcut: "align",
        states: ["default"],
        responsive: false,
        properties: ["vertical-align"],
        values: {
            "baseline": "baseline",
            "top": "top",
            "middle": "middle",
            "bottom": "bottom",
            "text-top": "text-top",
            "text-bottom": "text-bottom",
        },
    }),
    // Cursor
    cursor: generateHelpers({
        prefix: "is",
        states: ["default"],
        responsive: false,
        properties: ["cursor"],
        important: true,
        values: {
            "clickable": ["pointer", "!important"],
            "not-allowed": ["not-allowed", "!important"],
        },
    }),
    // Display
    display: generateHelpers({
        prefix: "is",
        states: ["default"],
        responsive: true,
        properties: ["display"],
        values: {
            "block": "block",
            "flex": "flex",
            "inline": "inline",
            "inline-block": "inline-block",
            "inline-flex": "inline-flex",
            "hidden": "none",
        },
    }),
    // Float
    float: generateHelpers({
        prefix: "is",
        states: ["default"],
        responsive: true,
        properties: ["float"],
        values: {
            "aligned-left": "left",
            "aligned-right": "right",
        },
    }),
    // Overflow
    overflow: generateHelpers({
        prefix: "is",
        states: ["default"],
        responsive: true,
        properties: ["overflow"],
        values: {
            "clipped": ["hidden", "!important"],
            "scrollable": ["auto", "!important"],
        },
    }),
    // Position
    position: generateHelpers({
        prefix: "is",
        states: ["default"],
        responsive: true,
        properties: ["position"],
        values: {
            "relative": "relative",
            "absolute": "absolute",
            "sticky": "sticky",
            "fixed": "fixed",
        },
    }),
    // Text transform
    textTransform: generateHelpers([
        {
            prefix: "is",
            states: ["default"],
            responsive: false,
            properties: ["fontStyle"],
            values: {
                italic: "italic"
            },
        },
        {
            prefix: "is",
            states: ["default"],
            responsive: false,
            properties: ["textDecoration"],
            values: {
                "underlined": "underline",
                "not-underlined": ["none", "!important"],
            },
        },
        {
            prefix: "is",
            states: ["default"],
            responsive: false,
            properties: ["textTransform"],
            values: {
                "capitalized": "capitalize",
                "lowercase": "lowercase",
                "uppercase": "uppercase",
            },
        },
    ]),
    // Negative selectors
    negative: generateHelpers([
        {
            prefix: "is",
            states: ["default"],
            responsive: false,
            properties: ["borderRadius"],
            values: {
                "radiusless": ["0px", "!important"],
            },
        },
        {
            prefix: "is",
            states: ["default"],
            responsive: false,
            properties: ["boxShadow"],
            values: {
                "shadowless": ["none", "!important"],
            },
        },
        {
            prefix: "is",
            states: ["default"],
            responsive: false,
            properties: ["userSelect"],
            values: {
                "unselectable": ["none", "!important"],
            },
        },
        {
            prefix: "is",
            states: ["default"],
            responsive: false,
            properties: ["opacity"],
            values: {
                transparent: ["0", "!important"],
            },
        },
    ]),
};