LibrePCB

import {
    Button,
    IconButton,
    LinkText,
    SceneButton,
    ToolTip,
} from "../../widgets.slint";
import {
    Backend,
    Data,
    DeviceTabData,
    TabAction,
} from "../../api.slint";

component DeviceDependencyCard inherits Rectangle {
    in property <int> section-index;
    in-out property <[DeviceTabData]> tabs;
    in property <int> index;

    // Set by derived components.
    in property <string> type;
    in property <bool> error;
    in property <string> error-title;
    in property <string> uninitialized-title;
    in property <string> name;
    in property <string> description;
    in property <color> background-color;
    in property <color> foreground-color;
    in property <bool> has-measure-tool;
    in property <int> scene;
    in property <bool> primary;
    in property <bool> read-only;

    property <string> choose-text: @tr("Choose {}", type) + "...";

    callback open-clicked;
    callback choose-clicked;

    background: error ? Data.theme.error : Data.theme.control-checked;
    border-radius: 5px;
    clip: true;  // For the rounded corners

    VerticalLayout {
        padding: 2px;

        VerticalLayout {
            padding: 4px;
            spacing: 5px;

            HorizontalLayout {
                spacing: 8px;

                title-btn := LinkText {
                    z: 20;
                    horizontal-stretch: 0;
                    font-size: 14px;
                    font-weight: 700;
                    overflow: elide;
                    vertical-alignment: center;
                    color: error ? Data.theme.error-text : Data.theme.control-text;
                    text: error ? error-title : (name.is-empty ? uninitialized-title : name);
                    enabled: !name.is-empty;
                    accessible-label: type;

                    if self.enabled && self.has-hover: Rectangle {
                        x: 0;
                        y: parent.height - self.height;
                        width: parent.preferred-width;
                        height: 1px;
                        background: parent.color;
                    }

                    if self.enabled && self.has-hover: ToolTip {
                        x: parent.width + 5px;
                        y: (parent.height - self.height) / 2;
                        text: @tr("Open Editor");
                    }

                    clicked => {
                        open-clicked();
                    }
                }

                if (!read-only) && ((!name.is-empty) || error): choose-btn-1 := IconButton {
                    z: 10;
                    height: 18px;
                    style: hyperlink;
                    icon: @image-url("../../../../font-awesome/svgs/solid/folder-open.svg");
                    tooltip: choose-text;
                    tooltip-position: error ? left : right;
                    color-enabled: error ? Data.theme.error-text.with-alpha(0.7) : Data.theme.control-text.mix(Data.theme.control-text-muted, 0.5);
                    color-hovered: error ? Data.theme.error-text : Data.theme.control-text;

                    clicked => {
                        choose-clicked();
                    }
                }

                if !name.is-empty: type-txt := Text {
                    horizontal-stretch: 1;
                    font-size: 10px;
                    font-weight: 300;
                    color: title-btn.color;
                    horizontal-alignment: right;
                    vertical-alignment: center;
                    text: type.to-uppercase();
                    accessible-role: none;
                }
            }

            if !description.is-empty: description-txt := Text {
                max-height: 30px;
                font-size: error ? 12px : 11px;
                font-weight: error ? 600 : 400;
                font-italic: true;
                color: title-btn.color;
                wrap: word-wrap;
                overflow: elide;
                text: description;
                accessible-label: "description";
            }
        }

        Rectangle {
            min-width: 100px;
            min-height: 100px;
            preferred-width: 300px;
            preferred-height: 300px;
            background: name.is-empty ? Data.theme.control : background-color;
            border-bottom-left-radius: root.border-radius - parent.padding;
            border-bottom-right-radius: root.border-radius - parent.padding;
            clip: true;

            if (!name.is-empty) || error: Image {
                x: 0;
                y: 0;
                width: 100%;
                height: 100%;
                source: Backend.render-scene(section-index, parent.width, parent.height, scene, tabs[index].frame);
                accessible-role: none;

                ta := TouchArea {
                    mouse-cursor: tabs[index].tool-cursor;

                    view-buttons-l := VerticalLayout {
                        x: parent.width - self.preferred-width - 7px;
                        y: 7px;
                        width: self.preferred-width;

                        zoom-fit-btn := SceneButton {
                            width: 23px;
                            icon: @image-url("../../../../../img/zoom-fit.svg");
                            base-color: background-color;
                            base-text-color: foreground-color;

                            clicked => {
                                Backend.trigger-tab(section-index, index, TabAction.zoom-fit);
                            }
                        }

                        if has-measure-tool: measure-btn := SceneButton {
                            width: 23px;
                            icon: @image-url("../../../../font-awesome/svgs/solid/ruler.svg");
                            icon-scale: 0.9;
                            base-color: background-color;
                            base-text-color: foreground-color;

                            clicked => {
                                Backend.trigger-tab(section-index, index, TabAction.tool-measure);
                            }
                        }
                    }

                    pointer-event(event) => {
                        if event.kind == PointerEventKind.down {
                            Data.set-current-tab(section-index, index);
                        }
                        Backend.scene-pointer-event(section-index, self.mouse-x, self.mouse-y, event, scene);
                    }

                    scroll-event(event) => {
                        Backend.scene-scrolled(section-index, self.mouse-x, self.mouse-y, event, scene) ? accept : reject
                    }
                }
            }

            if (!read-only) && name.is-empty && (!error): choose-btn-2 := Button {
                width: max(self.preferred-width, 100px);
                icon: @image-url("../../../../font-awesome/svgs/solid/folder-open.svg");
                text: choose-text;
                primary: primary;

                clicked => {
                    choose-clicked();
                }
            }
        }
    }
}

export component ComponentCard inherits DeviceDependencyCard {
    type: @tr("Component");
    error: self.tabs[self.index].component-error;
    error-title: @tr("Failed to load component");
    uninitialized-title: @tr("No component selected");
    name: self.tabs[self.index].component-name;
    description: self.tabs[self.index].component-description;
    background-color: self.tabs[self.index].component-background-color;
    foreground-color: self.tabs[self.index].component-foreground-color;
    has-measure-tool: false;
    scene: 0;

    open-clicked => {
        Backend.trigger-tab(self.section-index, self.index, TabAction.device-open-component);
    }

    choose-clicked => {
        Backend.trigger-tab(self.section-index, self.index, TabAction.device-select-component);
    }
}

export component PackageCard inherits DeviceDependencyCard {
    type: @tr("Package");
    error: self.tabs[self.index].package-error;
    error-title: @tr("Failed to load package");
    uninitialized-title: @tr("No package selected");
    name: self.tabs[self.index].package-name;
    description: self.tabs[self.index].package-description;
    background-color: self.tabs[self.index].package-background-color;
    foreground-color: self.tabs[self.index].package-foreground-color;
    has-measure-tool: true;
    scene: 1;

    open-clicked => {
        Backend.trigger-tab(self.section-index, self.index, TabAction.device-open-package);
    }

    choose-clicked => {
        Backend.trigger-tab(self.section-index, self.index, TabAction.device-select-package);
    }
}