import { ColorScheme } from "../theme/color_scheme"
import { with_opacity } from "../theme/color"
import { background, border, text } from "./components"
import { interactive, toggleable } from "../element"

export default function picker(theme: ColorScheme): any {
    const container = {
        background: background(theme.lowest),
        border: border(theme.lowest),
        shadow: theme.modal_shadow,
        corner_radius: 12,
        padding: {
            bottom: 4,
        },
    }
    const input_editor = {
        placeholder_text: text(theme.lowest, "sans", "on", "disabled"),
        selection: theme.players[0],
        text: text(theme.lowest, "mono", "on"),
        border: border(theme.lowest, { bottom: true }),
        padding: {
            bottom: 8,
            left: 16,
            right: 16,
            top: 8,
        },
        margin: {
            bottom: 4,
        },
    }
    const empty_input_editor: any = { ...input_editor }
    delete empty_input_editor.border
    delete empty_input_editor.margin

    return {
        ...container,
        empty_container: {
            ...container,
            padding: {},
        },
        item: toggleable({
            base: interactive({
                base: {
                    padding: {
                        bottom: 4,
                        left: 12,
                        right: 12,
                        top: 4,
                    },
                    margin: {
                        top: 1,
                        left: 4,
                        right: 4,
                    },
                    corner_radius: 8,
                    text: text(theme.lowest, "sans", "variant"),
                    highlight_text: text(theme.lowest, "sans", "accent", {
                        weight: "bold",
                    }),
                },
                state: {
                    hovered: {
                        background: with_opacity(
                            background(theme.lowest, "hovered"),
                            0.5
                        ),
                    },
                    clicked: {
                        background: with_opacity(
                            background(theme.lowest, "pressed"),
                            0.5
                        ),
                    },
                },
            }),
            state: {
                active: {
                    default: {
                        background: with_opacity(
                            background(theme.lowest, "base", "active"),
                            0.5
                        ),
                    },
                    hovered: {
                        background: with_opacity(
                            background(theme.lowest, "hovered"),
                            0.5
                        ),
                    },
                    clicked: {
                        background: with_opacity(
                            background(theme.lowest, "pressed"),
                            0.5
                        ),
                    },
                },
            },
        }),

        input_editor,
        empty_input_editor,
        no_matches: {
            text: text(theme.lowest, "sans", "variant"),
            padding: {
                bottom: 8,
                left: 16,
                right: 16,
                top: 8,
            },
        },
        header: {
            text: text(theme.lowest, "sans", "variant", { size: "xs" }),

            margin: {
                top: 1,
                left: 8,
                right: 8,
            },
        },
        footer: {
            text: text(theme.lowest, "sans", "variant", { size: "xs" }),
            margin: {
                top: 1,
                left: 8,
                right: 8,
            },

        }
    }
}