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

import { md } from "md.slint";

export Ripple := Rectangle { 
    in property<length> ripple-x;
    in property<length> ripple-y;
    in property<bool> active;
    in property<bool> has-effect;
    in property<brush> ripple-color <=> circle.background;
    
    circle := Rectangle {
        x: root.ripple-x  - width / 2;
        y: root.ripple-y  - width / 2;
        height: width;
        border-radius: width  / 2;
    }

    states [
        active when root.active && root.has-effect: {
            circle.width: root.width * 2 * 1.4142;
        }
    ]

    transitions [
        in active : {
            animate circle.width { duration: 2s; easing: ease-out; }
        }
    ]
}

// A touch area that also represents a visual state.
export StateLayer := TouchArea {
    in property<bool> focusable;
    in property<brush> selection-background;
    in property<brush> ripple-color;
    in property<bool> has-ripple;
    in property<length> border-radius;
    
    out property<bool> has-focus <=> fs.has-focus;

    in-out property<brush> background;
    in-out property<bool> checked;
  
    forward-focus: fs;

    ripple := Ripple {
        width: 100%;
        height: 100%;
        opacity: 0;
        active: root.pressed;
        ripple-x: root.pressed-x;
        ripple-y: root.pressed-y;
        clip: true;
        border-radius: root.border-radius;
        background: root.background;
        ripple-color: root.ripple-color;
        has-effect: root.has-ripple;

        animate opacity { duration: 250ms; easing: ease; }
        animate background { duration: 250ms; }
    }
    
    fs := FocusScope {
        width: 0px; // Do not react on clicks
        enabled: root.enabled && root.focusable;

        key-pressed(event) => {
            if (event.text == " " || event.text == "\n") {
                 root.clicked();
                 return accept;
            }
            return reject;
        }
    }

    states [
        pressed when root.pressed: {
            ripple.opacity: 0.12;
        }
        checked when root.checked: {
            ripple.opacity: 1.0;
            ripple.background: selection-background;
        }
        hover when root.has-hover: {
            ripple.opacity: 0.08;
        }
        focused when root.has-focus: {
            ripple.opacity: 0.12;
        }
    ]
}