import { text, border, background, foreground, TextStyle } from "./components"
import { Interactive, interactive, toggleable } from "../element"
import { tab_bar_button } from "../component/tab_bar_button"
import { StyleSets, useTheme } from "../theme"

type RoleCycleButton = TextStyle & {
    background?: string
}
// TODO: Replace these with zed types
type RemainingTokens = TextStyle & {
    background: string
    margin: { top: number; right: number }
    padding: {
        right: number
        left: number
        top: number
        bottom: number
    }
    corner_radius: number
}

export default function assistant(): any {
    const theme = useTheme()

    const interactive_role = (
        color: StyleSets,
    ): Interactive<RoleCycleButton> => {
        return interactive({
            base: {
                ...text(theme.highest, "sans", color, { size: "sm" }),
            },
            state: {
                hovered: {
                    ...text(theme.highest, "sans", color, { size: "sm" }),
                    background: background(theme.highest, color, "hovered"),
                },
                clicked: {
                    ...text(theme.highest, "sans", color, { size: "sm" }),
                    background: background(theme.highest, color, "pressed"),
                },
            },
        })
    }

    const tokens_remaining = (color: StyleSets): RemainingTokens => {
        return {
            ...text(theme.highest, "mono", color, { size: "xs" }),
            background: background(theme.highest, "on", "default"),
            margin: { top: 12, right: 20 },
            padding: { right: 4, left: 4, top: 1, bottom: 1 },
            corner_radius: 6,
        }
    }

    return {
        container: {
            background: background(theme.highest),
            padding: { left: 12 },
        },
        inline: {
            background: background(theme.highest),
            margin: { top: 3, bottom: 3 },
            border: border(theme.lowest, "on", {
                top: true,
                bottom: true,
                overlay: true,
            }),
            editor: {
                text: text(theme.highest, "mono", "default", { size: "sm" }),
                placeholder_text: text(theme.highest, "sans", "on", "disabled"),
                selection: theme.players[0],
            },
            disabled_editor: {
                text: text(theme.highest, "mono", "disabled", { size: "sm" }),
                placeholder_text: text(theme.highest, "sans", "on", "disabled"),
                selection: {
                    cursor: text(theme.highest, "mono", "disabled").color,
                    selection: theme.players[0].selection,
                },
            },
            pending_edit_background: background(theme.highest, "positive"),
            context_status: {
                error_icon: {
                    margin: { left: 8, right: 18 },
                    color: foreground(theme.highest, "negative"),
                    width: 12,
                },
                in_progress_icon: {
                    margin: { left: 8, right: 18 },
                    color: foreground(theme.highest, "positive"),
                    width: 12,
                },
                complete_icon: {
                    margin: { left: 8, right: 18 },
                    color: foreground(theme.highest, "positive"),
                    width: 12,
                },
            },
            retrieve_context: toggleable({
                base: interactive({
                    base: {
                        icon_size: 12,
                        color: foreground(theme.highest, "variant"),

                        button_width: 12,
                        background: background(theme.highest, "on"),
                        corner_radius: 2,
                        border: {
                            width: 1,
                            color: background(theme.highest, "on"),
                        },
                        margin: { left: 2 },
                        padding: {
                            left: 4,
                            right: 4,
                            top: 4,
                            bottom: 4,
                        },
                    },
                    state: {
                        hovered: {
                            ...text(
                                theme.highest,
                                "mono",
                                "variant",
                                "hovered",
                            ),
                            background: background(
                                theme.highest,
                                "on",
                                "hovered",
                            ),
                            border: {
                                width: 1,
                                color: background(
                                    theme.highest,
                                    "on",
                                    "hovered",
                                ),
                            },
                        },
                        clicked: {
                            ...text(
                                theme.highest,
                                "mono",
                                "variant",
                                "pressed",
                            ),
                            background: background(
                                theme.highest,
                                "on",
                                "pressed",
                            ),
                            border: {
                                width: 1,
                                color: background(
                                    theme.highest,
                                    "on",
                                    "pressed",
                                ),
                            },
                        },
                    },
                }),
                state: {
                    active: {
                        default: {
                            icon_size: 12,
                            button_width: 12,
                            color: foreground(theme.highest, "variant"),
                            background: background(theme.highest, "accent"),
                            border: border(theme.highest, "accent"),
                        },
                        hovered: {
                            background: background(
                                theme.highest,
                                "accent",
                                "hovered",
                            ),
                            border: border(theme.highest, "accent", "hovered"),
                        },
                        clicked: {
                            background: background(
                                theme.highest,
                                "accent",
                                "pressed",
                            ),
                            border: border(theme.highest, "accent", "pressed"),
                        },
                    },
                },
            }),
            include_conversation: toggleable({
                base: interactive({
                    base: {
                        icon_size: 12,
                        color: foreground(theme.highest, "variant"),

                        button_width: 12,
                        background: background(theme.highest, "on"),
                        corner_radius: 2,
                        border: {
                            width: 1,
                            color: background(theme.highest, "on"),
                        },
                        padding: {
                            left: 4,
                            right: 4,
                            top: 4,
                            bottom: 4,
                        },
                    },
                    state: {
                        hovered: {
                            ...text(
                                theme.highest,
                                "mono",
                                "variant",
                                "hovered",
                            ),
                            background: background(
                                theme.highest,
                                "on",
                                "hovered",
                            ),
                            border: {
                                width: 1,
                                color: background(
                                    theme.highest,
                                    "on",
                                    "hovered",
                                ),
                            },
                        },
                        clicked: {
                            ...text(
                                theme.highest,
                                "mono",
                                "variant",
                                "pressed",
                            ),
                            background: background(
                                theme.highest,
                                "on",
                                "pressed",
                            ),
                            border: {
                                width: 1,
                                color: background(
                                    theme.highest,
                                    "on",
                                    "pressed",
                                ),
                            },
                        },
                    },
                }),
                state: {
                    active: {
                        default: {
                            icon_size: 12,
                            button_width: 12,
                            color: foreground(theme.highest, "variant"),
                            background: background(theme.highest, "accent"),
                            border: border(theme.highest, "accent"),
                        },
                        hovered: {
                            background: background(
                                theme.highest,
                                "accent",
                                "hovered",
                            ),
                            border: border(theme.highest, "accent", "hovered"),
                        },
                        clicked: {
                            background: background(
                                theme.highest,
                                "accent",
                                "pressed",
                            ),
                            border: border(theme.highest, "accent", "pressed"),
                        },
                    },
                },
            }),
        },
        message_header: {
            margin: { bottom: 4, top: 4 },
            background: background(theme.highest),
        },
        hamburger_button: tab_bar_button(theme, {
            icon: "icons/menu.svg",
        }),

        split_button: tab_bar_button(theme, {
            icon: "icons/split_message.svg",
        }),
        quote_button: tab_bar_button(theme, {
            icon: "icons/quote.svg",
        }),
        assist_button: tab_bar_button(theme, {
            icon: "icons/magic-wand.svg",
        }),
        zoom_in_button: tab_bar_button(theme, {
            icon: "icons/maximize.svg",
        }),
        zoom_out_button: tab_bar_button(theme, {
            icon: "icons/minimize.svg",
        }),
        plus_button: tab_bar_button(theme, {
            icon: "icons/plus.svg",
        }),
        title: {
            ...text(theme.highest, "sans", "default", { size: "xs" }),
        },
        saved_conversation: {
            container: interactive({
                base: {
                    background: background(theme.middle),
                    padding: { top: 4, bottom: 4 },
                    border: border(theme.middle, "default", {
                        top: true,
                        overlay: true,
                    }),
                },
                state: {
                    hovered: {
                        background: background(theme.middle, "hovered"),
                    },
                    clicked: {
                        background: background(theme.middle, "pressed"),
                    },
                },
            }),
            saved_at: {
                margin: { left: 8 },
                ...text(theme.highest, "sans", "variant", { size: "xs" }),
            },
            title: {
                margin: { left: 12 },
                ...text(theme.highest, "sans", "default", {
                    size: "sm",
                    weight: "bold",
                }),
            },
        },
        user_sender: interactive_role("base"),
        assistant_sender: interactive_role("accent"),
        system_sender: interactive_role("warning"),
        sent_at: {
            margin: { top: 2, left: 8 },
            ...text(theme.highest, "sans", "variant", { size: "2xs" }),
        },
        model: interactive({
            base: {
                background: background(theme.highest),
                margin: { left: 12, right: 4, top: 12 },
                padding: { right: 4, left: 4, top: 1, bottom: 1 },
                corner_radius: 4,
                ...text(theme.highest, "sans", "default", { size: "xs" }),
            },
            state: {
                hovered: {
                    background: background(theme.highest, "on", "hovered"),
                    border: border(theme.highest, "on", { overlay: true }),
                },
            },
        }),
        remaining_tokens: tokens_remaining("positive"),
        low_remaining_tokens: tokens_remaining("warning"),
        no_remaining_tokens: tokens_remaining("negative"),
        error_icon: {
            margin: { left: 8 },
            color: foreground(theme.highest, "negative"),
            width: 12,
        },
        api_key_editor: {
            background: background(theme.highest, "on"),
            corner_radius: 4,
            text: text(theme.highest, "mono", "on"),
            placeholder_text: text(theme.highest, "mono", "on", "disabled", {
                size: "xs",
            }),
            selection: theme.players[0],
            border: border(theme.highest, "on"),
            padding: {
                bottom: 4,
                left: 8,
                right: 8,
                top: 4,
            },
        },
        api_key_prompt: {
            padding: 10,
            ...text(theme.highest, "sans", "default", { size: "xs" }),
        },
    }
}