import { text, border, background, foreground } from "./components"
import { interactive } from "../element"
import { useTheme } from "../theme"

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

    return {
        container: {
            background: background(theme.highest),
            padding: { left: 12 },
        },
        message_header: {
            margin: { bottom: 6, top: 6 },
            background: background(theme.highest),
        },
        hamburger_button: interactive({
            base: {
                icon: {
                    color: foreground(theme.highest, "variant"),
                    asset: "icons/hamburger_15.svg",
                    dimensions: {
                        width: 15,
                        height: 15,
                    },
                },
                container: {
                    padding: { left: 12, right: 8.5 },
                },
            },
            state: {
                hovered: {
                    icon: {
                        color: foreground(theme.highest, "hovered"),
                    },
                },
            },
        }),
        split_button: interactive({
            base: {
                icon: {
                    color: foreground(theme.highest, "variant"),
                    asset: "icons/split_message_15.svg",
                    dimensions: {
                        width: 15,
                        height: 15,
                    },
                },
                container: {
                    padding: { left: 8.5, right: 8.5 },
                },
            },
            state: {
                hovered: {
                    icon: {
                        color: foreground(theme.highest, "hovered"),
                    },
                },
            },
        }),
        quote_button: interactive({
            base: {
                icon: {
                    color: foreground(theme.highest, "variant"),
                    asset: "icons/quote_15.svg",
                    dimensions: {
                        width: 15,
                        height: 15,
                    },
                },
                container: {
                    padding: { left: 8.5, right: 8.5 },
                },
            },
            state: {
                hovered: {
                    icon: {
                        color: foreground(theme.highest, "hovered"),
                    },
                },
            },
        }),
        assist_button: interactive({
            base: {
                icon: {
                    color: foreground(theme.highest, "variant"),
                    asset: "icons/assist_15.svg",
                    dimensions: {
                        width: 15,
                        height: 15,
                    },
                },
                container: {
                    padding: { left: 8.5, right: 8.5 },
                },
            },
            state: {
                hovered: {
                    icon: {
                        color: foreground(theme.highest, "hovered"),
                    },
                },
            },
        }),
        zoom_in_button: interactive({
            base: {
                icon: {
                    color: foreground(theme.highest, "variant"),
                    asset: "icons/maximize_8.svg",
                    dimensions: {
                        width: 12,
                        height: 12,
                    },
                },
                container: {
                    padding: { left: 10, right: 10 },
                },
            },
            state: {
                hovered: {
                    icon: {
                        color: foreground(theme.highest, "hovered"),
                    },
                },
            },
        }),
        zoom_out_button: interactive({
            base: {
                icon: {
                    color: foreground(theme.highest, "variant"),
                    asset: "icons/minimize_8.svg",
                    dimensions: {
                        width: 12,
                        height: 12,
                    },
                },
                container: {
                    padding: { left: 10, right: 10 },
                },
            },
            state: {
                hovered: {
                    icon: {
                        color: foreground(theme.highest, "hovered"),
                    },
                },
            },
        }),
        plus_button: interactive({
            base: {
                icon: {
                    color: foreground(theme.highest, "variant"),
                    asset: "icons/plus_12.svg",
                    dimensions: {
                        width: 12,
                        height: 12,
                    },
                },
                container: {
                    padding: { left: 10, right: 10 },
                },
            },
            state: {
                hovered: {
                    icon: {
                        color: foreground(theme.highest, "hovered"),
                    },
                },
            },
        }),
        title: {
            ...text(theme.highest, "sans", "default", { size: "sm" }),
        },
        saved_conversation: {
            container: interactive({
                base: {
                    background: background(theme.highest, "on"),
                    padding: { top: 4, bottom: 4 },
                },
                state: {
                    hovered: {
                        background: background(theme.highest, "on", "hovered"),
                    },
                },
            }),
            saved_at: {
                margin: { left: 8 },
                ...text(theme.highest, "sans", "default", { size: "xs" }),
            },
            title: {
                margin: { left: 16 },
                ...text(theme.highest, "sans", "default", {
                    size: "sm",
                    weight: "bold",
                }),
            },
        },
        user_sender: {
            default: {
                ...text(theme.highest, "sans", "default", {
                    size: "sm",
                    weight: "bold",
                }),
            },
        },
        assistant_sender: {
            default: {
                ...text(theme.highest, "sans", "accent", {
                    size: "sm",
                    weight: "bold",
                }),
            },
        },
        system_sender: {
            default: {
                ...text(theme.highest, "sans", "variant", {
                    size: "sm",
                    weight: "bold",
                }),
            },
        },
        sent_at: {
            margin: { top: 2, left: 8 },
            ...text(theme.highest, "sans", "default", { size: "2xs" }),
        },
        model: interactive({
            base: {
                background: background(theme.highest, "on"),
                margin: { left: 12, right: 12, top: 12 },
                padding: 4,
                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: {
            background: background(theme.highest, "on"),
            margin: { top: 12, right: 24 },
            padding: 4,
            corner_radius: 4,
            ...text(theme.highest, "sans", "positive", { size: "xs" }),
        },
        no_remaining_tokens: {
            background: background(theme.highest, "on"),
            margin: { top: 12, right: 24 },
            padding: 4,
            corner_radius: 4,
            ...text(theme.highest, "sans", "negative", { size: "xs" }),
        },
        error_icon: {
            margin: { left: 8 },
            color: foreground(theme.highest, "negative"),
            width: 12,
        },
        api_key_editor: {
            background: background(theme.highest, "on"),
            corner_radius: 6,
            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" }),
        },
    }
}