import { HorizontalBox } from "std-widgets.slint";
import { TypeScale } from "../typography.slint";

// Shared by onboarding and account settings so provider entry points keep the
// same recognizable brand treatment throughout the app.
export component ProviderButton inherits Rectangle {
    in property <string> text;
    in property <image> icon;
    in property <bool> colorize-icon: false;
    in property <length> icon-offset-x: 0px;
    in property <bool> enabled: true;
    in property <string> tooltip-text: "";
    in property <color> foreground;
    in property <color> muted;
    in property <color> surface;
    in property <color> hover-surface;
    in property <color> button-border;
    callback clicked;

    height: 48px;
    border-radius: 8px;
    border-width: 1px;
    border-color: root.enabled ? root.button-border : root.button-border.transparentize(0.5);
    background: provider-hit.has-hover && root.enabled ? root.hover-surface : root.surface;
    accessible-role: button;
    accessible-label: root.tooltip-text == "" ? root.text : root.text + ". " + root.tooltip-text;
    accessible-enabled: root.enabled;
    accessible-action-default => {
        if root.enabled {
            root.clicked();
        }
    }
    animate background { duration: 150ms; }

    HorizontalBox {
        padding-left: 16px;
        padding-right: 16px;
        spacing: 12px;
        cross-axis-alignment: center;
        opacity: root.enabled ? 1 : 0.5;

        Rectangle {
            width: 20px;
            height: 20px;
            background: transparent;

            Image {
                x: root.icon-offset-x;
                width: 20px;
                height: 20px;
                source: root.icon;
                colorize: root.colorize-icon ? root.foreground : transparent;
                image-fit: contain;
                accessible-role: none;
            }
        }
        Text {
            horizontal-stretch: 1;
            text: root.text;
            color: root.foreground;
            font-size: TypeScale.body-large;
            font-weight: 600;
            vertical-alignment: center;
            overflow: elide;
        }
        Text {
            text: "›";
            color: root.muted;
            font-size: TypeScale.title-large;
            vertical-alignment: center;
        }
    }

    provider-hit := TouchArea {
        clicked => {
            if root.enabled {
                root.clicked();
            }
        }
        mouse-cursor: root.enabled ? pointer : default;
    }

    Rectangle {
        visible: root.tooltip-text != "" && provider-hit.has-hover;
        x: (parent.width - self.width) / 2;
        y: -self.height - 6px;
        width: tooltip-label.preferred-width + 16px;
        height: 28px;
        border-radius: 5px;
        background: #292929;
        z: 10000;

        tooltip-label := Text {
            text: root.tooltip-text;
            color: white;
            font-size: TypeScale.secondary;
            horizontal-alignment: center;
            vertical-alignment: center;
        }
    }
}