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


import { md } from "md.slint";

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

    property<string> text <=> label.text;
    property<bool> has-focus <=> fs.has-focus;
    property<bool> pressed: self.enabled && touch.pressed;
    property<bool> enabled <=> touch.enabled;
    property<bool> checkable;
    property<bool> checked;
    property<image> icon;
    property<length> font-size <=> label.font-size;

    accessible-label <=> label.text;
    accessible-role: button;

    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 := Rectangle {  
        opacity: 0;
        width: 100%;
        height: 100%;
        border-radius: container.border-radius;
        background: md.sys.color.on-secondary-container;
        animate opacity { duration: 250ms; easing: ease; }
     }

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

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

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

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

    fs := FocusScope {
        width: 0px; // Do not react on clicks
        enabled <=> root.enabled;
        key-pressed(event) => {
            if (event.text == " " || event.text == "\n") {
                 touch.clicked();
                 return accept;
            }
            return reject;
        }
    }

    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;
        }
        pressed when touch.pressed : {
            state-layer.opacity: 0.12;
        }
        hover when touch.has-hover : {
            state-layer.opacity: 0.08;    
            container.drop-shadow-blur: md.sys.elevation.level1;
            container.drop-shadow-color: md.sys.color.shadow;
        }
        focused when fs.has-focus : {
            state-layer.opacity: 0.12;
        }
    ]
}