import StyleRule, { AtomStyleRules } from "@web-atoms/core/dist/style/StyleRule";
import CSS from "@web-atoms/core/dist/web/styles/CSS";

const DataStyles = {
    "data-layout": {

        "row": StyleRule()
            .flexLayout({
                alignItems: "center",
                justifyContent: "flex-start"
            })
            .child(StyleRule("*")
                .flex("0 0 auto")
            ),

        "command-row": StyleRule()
            .backgroundColor("var(--accent-bg-color, #808080)")
            .borderRadius(9999)
            .padding(7)
            .nested(StyleRule("button")
                .backgroundColor("var(--accent-color, blue)")
                .color("var(--accent-text-color, white)")
                .hover(StyleRule()
                    .backgroundColor("var(--accent-color, blue)")
                )
                .child(StyleRule("i")
                    .color("var(--accent-text-color, white)")
                )
            ),

        "flex": StyleRule()
            .flexLayout({
                alignItems: "center",
                justifyContent: "flex-start"
            }),

        "flex-frame": StyleRule()
            .flexLayout({
                alignItems: "center",
                justifyContent: "flex-start"
            })
            .borderRadius(7)
            .padding(7)
            .border("solid 1px")
            .borderColor("var(--border-color, lightgray)"),

        "vertical-flex": StyleRule()
            .verticalFlexLayout({
                alignItems: "stretch",
                justifyContent: "flex-start"
            }),

        "vertical-flex-frame": StyleRule()
            .verticalFlexLayout({
                alignItems: "stretch",
                justifyContent: "start" as any
            })
            .borderRadius(7)
            .padding(7)
            .border("solid 1px")
            .borderColor("var(--border-color, lightgray)"),
        "vertical-flex-stretch-items": StyleRule()
            .verticalFlexLayout({
                alignItems: "stretch",
                justifyContent: "flex-start" as any
            })
            .padding(7)
            .child(StyleRule("*")
                .width("100%")
            ),

        "vertical-flex-stretch-items-frame": StyleRule()
            .verticalFlexLayout({
                alignItems: "stretch",
                justifyContent: "flex-start"
            })
            .borderRadius(7)
            .padding(7)
            .border("solid 1px")
            .borderColor("var(--border-color, lightgray)")
            .child(StyleRule("*")
                .width("100%")
            ),
    },
    "data-text-overflow": {
        "ellipsis": StyleRule()
            .minWidth(0)
            .flex("1")
            .overflow("hidden")
            .whiteSpace("nowrap")
            .textOverflow("ellipsis")
    },
    "data-flex-stretch": {
        "full": StyleRule()
            .flex("1 1 100% !important"),
        "half": StyleRule()
            .flex("1 1 50% !important"),
        "quarter": StyleRule()
            .flex("1 1 25% !important"),
        "threeFourth": StyleRule()
            .flex("1 1 75% !important"),
    },
    "data-color": {
        "red": StyleRule()
            .color("red")
    }
};

// setup...
for (const key in DataStyles) {
    if (Object.prototype.hasOwnProperty.call(DataStyles, key)) {
        const element = DataStyles[key];
        installStyle(key, element);
    }
}

export type IAppDataStyles = { [k in keyof typeof DataStyles ]?: keyof (typeof DataStyles)[k] };

export default DataStyles;

function installStyle(dataKey: string, style: any) {
    for (const key in style) {
        if (Object.prototype.hasOwnProperty.call(style, key)) {
            const element = style[key] as AtomStyleRules;
            CSS(element, `*[${dataKey}=${key}]`);
        }
    }
}

declare module "@web-atoms/core/dist/core/XNode" {
    // eslint-disable-next-line @typescript-eslint/no-empty-interface
    interface IElementAttributes extends IAppDataStyles {
    }
}