1import { Interactive, interactive, toggleable, Toggleable } from "../element"
 2import { TextStyle, background, text } from "../style_tree/components"
 3import { useTheme } from "../theme"
 4import { Button } from "./button"
 5
 6type LabelButtonStyle = {
 7    corder_radius: number
 8    background: string | null
 9    padding: {
10        top: number
11        bottom: number
12        left: number
13        right: number
14    },
15    margin: Button.Options['margin']
16    button_height: number
17} & TextStyle
18
19/** Styles an Interactive<ContainedText> */
20export function label_button_style(
21    options: Partial<Button.Options> = {
22        variant: Button.variant.Default,
23        shape: Button.shape.Rectangle,
24        states: {
25            hovered: true,
26            pressed: true
27        }
28    }
29): Interactive<LabelButtonStyle> {
30    const theme = useTheme()
31
32    const base = Button.button_base(options)
33    const layer = options.layer ?? theme.middle
34    const color = options.color ?? "base"
35
36    const default_state = {
37        ...base,
38        ...text(layer ?? theme.lowest, "sans", color),
39        font_size: Button.FONT_SIZE,
40    }
41
42    return interactive({
43        base: default_state,
44        state: {
45            hovered: {
46                background: background(layer, options.background ?? color, "hovered")
47            },
48            clicked: {
49                background: background(layer, options.background ?? color, "pressed")
50            }
51        }
52    })
53}
54
55/** Styles an Toggleable&lt;Interactive&lt;ContainedText>> */
56export function toggle_label_button_style(
57    options: Partial<Button.ToggleableOptions> = {
58        variant: Button.variant.Default,
59        shape: Button.shape.Rectangle,
60        states: {
61            hovered: true,
62            pressed: true
63        }
64    }
65): Toggleable<Interactive<LabelButtonStyle>> {
66    const activeOptions = {
67        ...options,
68        color: options.active_color || options.color,
69        background: options.active_background || options.background
70    }
71
72    return toggleable({
73        state: {
74            inactive: label_button_style(options),
75            active: label_button_style(activeOptions),
76        },
77    })
78}