LibrePCB

import { Button, Spinner } from "widgets.slint";
import { Tab } from "tab.slint";
import {
    Action,
    Backend,
    Constants,
    Data,
    EditorCommandSet as Cmd,
} from "api.slint";

component DonateButton inherits Button {
    text: @tr("Donate");
    status-tip: Cmd.donate.status-tip;
    icon: @image-url("../../font-awesome/svgs/solid/heart.svg");
    border-radius: self.height / 2;
    primary: true;

    clicked => {
        Backend.open-url(Constants.donate-url);
    }
}

export component HomeTab inherits Tab {
    in property <int> section-index;
    property <bool> compact-layout: self.width < 350px;

    show-watermark: project-preview-img.source.width == 0;

    l := VerticalLayout {
        padding: 10px;
        spacing: 10px;

        Text {
            font-size: 20px;
            font-weight: 700;
            color: Data.theme.base-text;
            wrap: word-wrap;
            text: @tr("Get Started With LibrePCB");
        }

        HorizontalLayout {
            property <image> image: @image-url("../../../img/video-tutorial.png");
            property <length> image-width-available: parent.width - buttons-l.preferred-width - 2 * parent.padding;

            spacing: 10px;

            if image-width-available > 180px: Rectangle {
                y: (buttons-l.height - self.height) / 2;
                width: min(buttons-l.preferred-height * image.width / image.height, image-width-available);
                height: self.width * image.height / image.width;
                border-radius: 12px;
                clip: true;

                Image {
                    width: 100%;
                    height: 100%;
                    image-fit: contain;
                    source: image;
                }
            }

            buttons-l := VerticalLayout {
                alignment: start;
                spacing: 10px;

                video-tutorials-btn := Button {
                    width: compact-layout ? (root.width - 2 * l.padding) : self.preferred-width;
                    horizontal-stretch: 1;
                    text: @tr("Video Tutorials");
                    status-tip: @tr("Open video tutorials in the web browser");
                    icon: @image-url("../../font-awesome/svgs/brands/youtube.svg");
                    border-radius: self.height / 2;

                    clicked => {
                        Backend.open-url(Constants.video-tutorials-url);
                    }
                }

                user-manual-btn := Button {
                    width: compact-layout ? (root.width - 2 * l.padding) : self.preferred-width;
                    text: @tr("User Manual & Getting Started Guide");
                    status-tip: Cmd.documentation-online.status-tip;
                    icon: @image-url("../../font-awesome/svgs/solid/book.svg");
                    border-radius: self.height / 2;

                    clicked => {
                        Backend.open-url(Constants.user-manual-url);
                    }
                }

                support-btn := Button {
                    width: compact-layout ? (root.width - 2 * l.padding) : self.preferred-width;
                    text: Cmd.support.text;
                    status-tip: Cmd.support.status-tip;
                    icon: @image-url("../../font-awesome/svgs/regular/comments.svg");
                    border-radius: self.height / 2;

                    clicked => {
                        Backend.open-url(Constants.support-url);
                    }
                }

                shortcuts-btn := Button {
                    width: compact-layout ? (root.width - 2 * l.padding) : self.preferred-width;
                    text: Cmd.keyboard-shortcuts-reference.text;
                    status-tip: Cmd.keyboard-shortcuts-reference.status-tip;
                    icon: @image-url("../../font-awesome/svgs/solid/keyboard.svg");
                    border-radius: self.height / 2;

                    clicked => {
                        Backend.trigger(Action.keyboard-shortcuts-reference);
                    }
                }
            }
        }

        if compact-layout: donate-btn-1 := DonateButton { }

        if !compact-layout: Rectangle {
            background: Data.theme.control;
            border-color: Data.theme.control-border;
            border-width: 1px;
            border-radius: 10px;

            HorizontalLayout {
                padding: 8px;
                spacing: 10px;

                Text {
                    vertical-alignment: center;
                    font-size: 14px;
                    font-italic: true;
                    wrap: word-wrap;
                    color: Data.theme.control-text;
                    text: @tr("Support the LibrePCB project with a donation to keep the development and maintenance ongoing ‒ Thank you!");
                }

                Rectangle {
                    width: self.preferred-width;

                    donate-btn-2 := DonateButton { }
                }
            }
        }

        preview-flickable := Flickable {
            vertical-stretch: 1;
            width: 100%;
            viewport-width: self.width;
            viewport-height: project-preview-img.height;
            interactive: project-preview-img.source.width > 0;

            project-preview-img := Image {
                width: 100%;
                height: self.width * self.source.height / max(self.source.width, 1);
                horizontal-alignment: left;
                vertical-alignment: top;
                image-fit: contain;
                source: Data.project-preview-image;
                visible: Backend.request-project-preview(Data.project-preview-path, parent.width, Data.theme);
                opacity: Data.project-preview-rendering ? 0.5 : 1;
                accessible-label: "Rendered project preview";
            }

            project-preview-ta := TouchArea {
                x: project-preview-img.x;
                y: project-preview-img.y;
                width: project-preview-img.width;
                height: project-preview-img.height;

                // The Flickable consumes click events so we have to catch them to
                // update the current section (Data.current-section-index) on a click.
                pointer-event(event) => {
                    if event.kind == PointerEventKind.down {
                        Data.current-section-index = section-index;
                    }
                }
            }
        }
    }

    if Data.project-preview-rendering: project-preview-spinner := Spinner {
        x: preview-flickable.x + (preview-flickable.width - self.width) / 2;
        y: preview-flickable.y + (preview-flickable.height - self.height) / 2;
        width: 50px;
        height: self.width;
        indeterminate: true;
    }
}