LibrePCB

import {
    Button,
    CheckBox,
    IconButton,
    LineEdit,
    LinkText,
    TextInput,
} from "../widgets.slint";
import { Tab } from "../tab.slint";
import {
    Backend,
    CreateLibraryTabData,
    Data,
    TabAction,
    WindowSectionData,
} from "../api.slint";

export component CreateLibraryTab inherits Tab {
    in property <int> section-index;
    in-out property <WindowSectionData> section;
    property <[CreateLibraryTabData]> tabs: section.create-library-tabs;

    init => {
        name-edt.select-all();
        name-edt.focus();
    }

    key-pressed(event) => {
        if event.text == Key.Escape {
            Backend.trigger-tab(section-index, section.current-tab-index, TabAction.cancel);
            return accept;
        }
        reject
    }

    function edit-key-pressed(event: KeyEvent) -> EventResult {
        if event.text == Key.Return {
            Backend.trigger-tab(section-index, section.current-tab-index, TabAction.accept);
            return accept;
        }
        reject
    }

    GridLayout {
        padding: 10px;
        spacing: 5px;

        Row {
            Text {
                colspan: 2;
                height: self.preferred-height + 10px;
                font-size: 14px;
                font-weight: 700;
                color: Data.theme.base-text;
                wrap: TextWrap.word-wrap;
                text: @tr("Create a new local library");
            }
        }

        Row {
            Text {
                colspan: 2;
                height: self.preferred-height;
                font-italic: true;
                color: Data.theme.base-text;
                wrap: TextWrap.word-wrap;
                text: @tr("To import KiCad or Eagle libraries, create a new library called e.g. 'KiCad Import' or 'Eagle Import'. Then open the new library and start the import wizard via 'File -> Import'.");
            }
        }

        Row {
            VerticalLayout {
                colspan: 2;
                padding-bottom: 5px;

                Rectangle {
                    height: 1px;
                    background: Data.theme.base-border;
                }
            }
        }

        Row {
            name-txt := Text {
                text: @tr("Name:");
                vertical-alignment: center;
                color: Data.theme.base-text;
                accessible-role: none;
            }

            name-edt := LineEdit {
                text: tabs[section.current-tab-index].name;
                validation-error: tabs[section.current-tab-index].name-error;
                accessible-label: name-txt.text;

                changed text => {
                    tabs[section.current-tab-index].name = self.text;
                }

                key-pressed(event) => {
                    edit-key-pressed(event)
                }
            }
        }

        Row {
            Rectangle { }

            Flickable {
                viewport-width: examples-l.preferred-width;
                height: examples-l.preferred-height;

                examples-l := HorizontalLayout {
                    alignment: start;
                    spacing: 4px;

                    examples-txt := Text {
                        font-size: 11px;
                        text: @tr("Examples:");
                        color: Data.theme.base-text;
                        accessible-role: none;
                    }

                    // Note: Names not translated by intention for valid and
                    // consistent library names for all users.
                    for text[i] in ["My Library", "•", "KiCad Import", "•", "Eagle Import"]: LinkText {
                        overflow: elide;
                        font-size: 11px;
                        text: text;
                        enabled: text != "•";
                        accessible-role: none;

                        clicked => {
                            name-edt.text = text;
                        }
                    }
                }
            }
        }

        Row {
            description-txt := Text {
                text: @tr("Description:");
                vertical-alignment: center;
                color: Data.theme.base-text;
                accessible-role: none;
            }

            description-edt := LineEdit {
                text: tabs[section.current-tab-index].description;
                accessible-label: description-txt.text;

                changed text => {
                    tabs[section.current-tab-index].description = self.text;
                }

                key-pressed(event) => {
                    edit-key-pressed(event)
                }
            }
        }

        Row {
            author-txt := Text {
                text: @tr("Author:");
                vertical-alignment: center;
                color: Data.theme.base-text;
                accessible-role: none;
            }

            author-edt := LineEdit {
                text: tabs[section.current-tab-index].author;
                accessible-label: author-txt.text;

                changed text => {
                    tabs[section.current-tab-index].author = self.text;
                }

                key-pressed(event) => {
                    edit-key-pressed(event)
                }
            }
        }

        Row {
            version-txt := Text {
                text: @tr("Version:");
                vertical-alignment: center;
                color: Data.theme.base-text;
                accessible-role: none;
            }

            version-edt := LineEdit {
                text: tabs[section.current-tab-index].version;
                placeholder-text: tabs[section.current-tab-index].version-default;
                validation-error: tabs[section.current-tab-index].version-error;
                accessible-label: version-txt.text;

                changed text => {
                    tabs[section.current-tab-index].version = self.text;
                }

                key-pressed(event) => {
                    edit-key-pressed(event)
                }
            }
        }

        Row {
            url-txt := Text {
                text: @tr("URL:");
                vertical-alignment: center;
                color: Data.theme.base-text;
                accessible-role: none;
            }

            url-edt := LineEdit {
                text: tabs[section.current-tab-index].url;
                placeholder-text: @tr("e.g. URL to the Git repository (optional)");
                validation-error: tabs[section.current-tab-index].url-error;
                accessible-label: url-txt.text;

                changed text => {
                    tabs[section.current-tab-index].url = self.text;
                }

                key-pressed(event) => {
                    edit-key-pressed(event)
                }
            }
        }

        Row {
            license-txt := Text {
                text: @tr("License:");
                vertical-alignment: center;
                color: Data.theme.base-text;
                accessible-role: none;
            }

            HorizontalLayout {
                spacing: 8px;

                cc0-sw := CheckBox {
                    horizontal-stretch: 1;
                    text: @tr("Put library under the Public Domain License CC0-1.0\n(mandatory to publish it on librepcb.org)");
                    checked: tabs[section.current-tab-index].cc0;
                    accessible-description: self.text;
                    accessible-label: license-txt.text;

                    changed checked => {
                        tabs[section.current-tab-index].cc0 = self.checked;
                    }
                }

                cc0-info-btn := IconButton {
                    property <string> url: "https://en.wikipedia.org/wiki/Creative_Commons_license";

                    y: (parent.height - self.height) / 2;
                    height: 16px;
                    icon: @image-url("../../../bootstrap-icons/icons/info-circle.svg");
                    status-tip: url;
                    style: hyperlink;
                    accessible-label: "more information";

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

        Row {
            directory-txt := Text {
                text: @tr("Directory:");
                vertical-alignment: center;
                color: Data.theme.base-text;
                accessible-role: none;
            }

            directory-edt := LineEdit {
                text: tabs[section.current-tab-index].directory;
                placeholder-text: tabs[section.current-tab-index].directory-default;
                validation-error: tabs[section.current-tab-index].directory-error;
                accessible-label: directory-txt.text;

                changed text => {
                    tabs[section.current-tab-index].directory = self.text;
                }

                key-pressed(event) => {
                    edit-key-pressed(event)
                }
            }
        }

        Row {
            Rectangle { }

            HorizontalLayout {
                horizontal-stretch: 1;
                padding-top: 5px;
                spacing: 8px;
                alignment: start;

                create-btn := Button {
                    primary: true;
                    enabled: tabs[section.current-tab-index].valid;
                    text: @tr("Create Library");

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

                cancel-btn := Button {
                    text: @tr("Cancel");

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

                property <string> creation-error: tabs[section.current-tab-index].creation-error;
                if !creation-error.is-empty: creation-error-edt := TextInput {
                    color: Data.theme.base-text-error;
                    read-only: true;
                    wrap: word-wrap;
                    vertical-alignment: center;
                    text: creation-error;
                    accessible-label: "error message";
                    accessible-description: self.text;
                }
            }
        }

        Row {
            Rectangle { }
        }
    }
}