// Copyright © SixtyFPS GmbH <info@slint-ui.com>
// SPDX-License-Identifier: GPL-3.0-only OR LicenseRef-Slint-commercial

import { StateLayer } from "comp-state-layer.slint";
import { md } from "md.slint";

// Default button widget with Material Design Filled Button look and feel.
export component Button {
    callback clicked;

    in property<string> text <=> label.text;
    out property<bool> has-focus:  state-layer.has-focus;
    out property<bool> pressed: self.enabled &&  state-layer.pressed;
    in property<bool> enabled <=> state-layer.enabled;
    in property<bool> checkable;
    in-out property<bool> checked;
    in property<image> icon;

    accessible-label <=> label.text;
    accessible-role: button;
    forward-focus: state-layer;

    height: 40px;

    container := Rectangle {
        width: 100%;
        height: 100%;
        border-radius: 20px;
        background: md.sys.color.secondary-container;
        drop-shadow-color: transparent;
        drop-shadow-blur: md.sys.elevation.level0;
        drop-shadow-offset-y: 1px;
    }

    state-layer := StateLayer {
        has-ripple: true;
        border-radius: container.border-radius;
        background: md.sys.color.on-secondary-container;
        ripple-color: md.sys.color.secondary-ripple;
        selection-background: md.sys.color.primary;
        focusable: true;

        clicked => {
            if (root.checkable) {
                root.checked = !root.checked;
            }
            root.clicked();
        }
    }

    HorizontalLayout {
        padding-left: 24px;
        padding-right: 24px;
        spacing: 8px;

        if (root.icon.width > 0 && root.icon.height > 0): Image {
            source <=> root.icon;
            width: 24px;
            opacity: label.opacity;
        }

        label := Text {
            color: md.sys.color.on-secondary-container;
            vertical-alignment: center;
            horizontal-alignment: center;
            font-weight: md.sys.typescale.label-large.weight;

            animate color { duration: 250ms; easing: ease; }
        }
    }

    states [
        disabled when !root.enabled : {
            container.background: md.sys.color.on-surface;
            container.opacity: 0.12;
            label.opacity: 0.38;
            label.color: md.sys.color.on-surface;
        }
        checked when root.checked: {
            label.color: md.sys.color.on-primary;
        }
    ]
}