/// 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 { ToolButton } from "tool-button.slint";

// ToolButton has a fixed height, so wrap it to centre it in the 48px header.
component HeaderTool inherits Rectangle {
    in property <image> glyph;
    in property <bool> active;
    callback clicked();
    width: 32px;
    ToolButton {
        glyph: root.glyph;
        active: root.active;
        y: (parent.height - self.height) / 2;
        clicked => {
            root.clicked();
        }
    }
}

export component ChatHeader inherits Rectangle {
    in property <string> room-name;
    in property <string> topic;
    in property <bool> is-dm;
    in property <bool> encrypted;
    in-out property <bool> show-members;
    callback open-threads();
    callback open-pins();
    callback open-search();

    height: Theme.header-height;
    background: Theme.chat-bg;

    Rectangle {
        y: parent.height - 1px;
        height: 1px;
        background: Theme.rail-bg;
    }

    // Left: "# name | topic"
    HorizontalLayout {
        padding-left: 16px;
        padding-right: 8px;
        spacing: 8px;

        Rectangle {
            width: 22px;
            if !root.is-dm: Icon {
                source: Icons.hash;
                tint: Theme.text-muted;
                icon-size: 22px;
                y: (parent.height - self.height) / 2;
            }
            if root.is-dm: Text {
                text: "@";
                color: Theme.text-muted;
                font-size: 20px;
                font-weight: 700;
                horizontal-alignment: center;
                vertical-alignment: center;
            }
        }

        Text {
            text: root.room-name;
            color: Theme.text-header;
            font-size: 16px;
            font-weight: 700;
            vertical-alignment: center;
            overflow: elide;
            width: min(self.preferred-width, 280px);
        }

        if root.encrypted: Rectangle {
            width: 16px;
            Icon {
                source: Icons.lock;
                tint: Theme.text-muted;
                icon-size: 14px;
                y: (parent.height - self.height) / 2;
            }
        }

        if root.topic != "": Rectangle {
            width: 1px;
            Rectangle {
                width: 1px;
                height: 24px;
                y: (parent.height - self.height) / 2;
                background: Theme.divider;
            }
        }

        if root.topic != "": Text {
            text: root.topic;
            color: Theme.text-muted;
            font-size: 14px;
            vertical-alignment: center;
            overflow: elide;
        }

        Rectangle {
            width: 0px;
            horizontal-stretch: 1;
        }

        // Right: toolbar. These open panels that aren't built yet (see docs/DISCORD-PARITY.md).
        HeaderTool {
            glyph: Icons.thread;
            clicked => {
                root.open-threads();
            }
        }

        HeaderTool {
            glyph: Icons.pin;
            clicked => {
                root.open-pins();
            }
        }

        HeaderTool {
            glyph: Icons.users;
            active: root.show-members;
            clicked => {
                root.show-members = !root.show-members;
            }
        }

        HeaderTool {
            glyph: Icons.search;
            clicked => {
                root.open-search();
            }
        }
    }
}