import { Theme, StyleSets } from "../common"
import { interactive } from "../element"
import { InteractiveState } from "../element/interactive"
import { background, foreground } from "../style_tree/components"

interface TabBarButtonOptions {
    icon: string
    color?: StyleSets
}

type TabBarButtonProps = TabBarButtonOptions & {
    state?: Partial<Record<InteractiveState, Partial<TabBarButtonOptions>>>
}

export function tab_bar_button(theme: Theme, { icon, color = "base" }: TabBarButtonProps) {
    const button_spacing = 8

    return (
        interactive({
            base: {
                icon: {
                    color: foreground(theme.middle, color),
                    asset: icon,
                    dimensions: {
                        width: 15,
                        height: 15,
                    },
                },
                container: {
                    corner_radius: 4,
                    padding: {
                        top: 4, bottom: 4, left: 4, right: 4
                    },
                    margin: {
                        left: button_spacing / 2,
                        right: button_spacing / 2,
                    },
                },
            },
            state: {
                hovered: {
                    container: {
                        background: background(theme.middle, color, "hovered"),

                    }
                },
                clicked: {
                    container: {
                        background: background(theme.middle, color, "pressed"),
                    }
                },
            },
        })
    )
}