/// TEMPORARY AI GENERATED FRONTEND \\\
///   NOT TO BE USED IN PRODUCTION  \\\

import { Theme } from "../theme.slint";
import { Icons } from "../icons.slint";
import { Icon } from "icon.slint";
import { Avatar } from "avatar.slint";
import { ToolButton } from "tool-button.slint";

// Bottom-left "you" bar: avatar, name, mute / deafen / settings.
export component UserPanel inherits Rectangle {
    in property <string> name;
    in property <string> user-id;
    in property <string> initial;
    in property <color> tint;
    in-out property <bool> muted;
    in-out property <bool> deafened;
    callback open-settings();
    callback logout();

    height: 52px;
    background: #232428;

    Avatar {
        initial: root.initial;
        tint: root.tint;
        diameter: 32px;
        x: 8px;
        y: (parent.height - self.height) / 2;
    }

    // Presence dot
    Rectangle {
        width: 12px;
        height: 12px;
        border-radius: 6px;
        background: Theme.success;
        border-width: 2px;
        border-color: #232428;
        x: 8px + 32px - 10px;
        y: (parent.height - 32px) / 2 + 32px - 10px;
    }

    Text {
        x: 48px;
        y: 10px;
        width: 100px;
        height: 16px;
        text: root.name;
        color: Theme.text-header;
        font-size: 13px;
        font-weight: 600;
        overflow: elide;
    }

    Text {
        x: 48px;
        y: 26px;
        width: 100px;
        height: 14px;
        text: root.user-id;
        color: Theme.text-muted;
        font-size: 11px;
        overflow: elide;
    }

    HorizontalLayout {
        x: parent.width - self.preferred-width - 4px;
        y: (parent.height - 28px) / 2;
        spacing: 0px;
        // Voice isn't wired yet: these only flip local state for now.
        ToolButton {
            glyph: Icons.mic;
            tint: root.muted ? Theme.danger : Theme.text-muted;
            clicked => {
                root.muted = !root.muted;
            }
        }

        ToolButton {
            glyph: Icons.headphones;
            tint: root.deafened ? Theme.danger : Theme.text-muted;
            clicked => {
                root.deafened = !root.deafened;
            }
        }

        ToolButton {
            glyph: Icons.logout;
            clicked => {
                root.logout();
            }
        }
    }
}