import { Theme } from "../theme.slint";
import { KeycapData, KeymapBridge } from "../globals.slint";

export component KeyButton inherits Rectangle {
    in property <KeycapData> data;
    in property <float> scale: 1.0;
    callback clicked(int);

    // Heat color: dark purple (cold) -> orange -> bright red (hot)
    property <color> heat-color:
        data.heat < 0.5
            ? #2d1b69.mix(#e67e22, data.heat * 2)
            : #e67e22.mix(#e74c3c, (data.heat - 0.5) * 2);

    property <bool> is-heatmap: KeymapBridge.heatmap-enabled && data.heat > 0;
    property <color> base-color: root.is-heatmap ? root.heat-color : data.color;
    property <color> text-color: root.is-heatmap && data.heat > 0.3 ? #1a1a2e : Theme.fg-primary;

    width: data.w;
    height: data.h;
    background: transparent;

    inner := Rectangle {
        width: 100%;
        height: 100%;
        border-radius: 4px;
        background: data.selected ? Theme.accent-purple : root.base-color;
        border-width: 1px;
        border-color: data.selected ? Theme.accent-cyan : Theme.bg-primary;
        transform-rotation: data.rotation * 1deg;
        transform-origin: {
            x: self.width / 2,
            y: self.height / 2,
        };

        Text {
            text: data.label;
            color: root.text-color;
            font-size: max(7px, 11px * root.scale);
            font-weight: root.is-heatmap ? 700 : 400;
            horizontal-alignment: center;
            vertical-alignment: center;
        }

        if data.sublabel != "" : Text {
            y: parent.height - 14px * root.scale;
            text: data.sublabel;
            color: root.is-heatmap ? root.text-color.with-alpha(0.7) : Theme.fg-secondary;
            font-size: max(5px, 8px * root.scale);
            horizontal-alignment: center;
            width: 100%;
        }

        TouchArea {
            clicked => { root.clicked(data.index); }
            mouse-cursor: pointer;
        }
    }
}