// Naming what you built.
//
// Saving snapshots the palette, the terminal colours and the ten effect values
// as they stand, so a saved theme restores the whole look rather than two
// accent hexes. Delete appears only for a saved theme, because a shipped one
// cannot be removed -- it is read from the catalog every launch.

import QtQuick
import qs.config
import qs.services

SettingRow {
    id: root

    readonly property bool custom: ThemeProfiles.activeProfile.shipped !== true

    label: "Save as"
    detail: root.custom
        ? "Saving again under a new name keeps both"
        : "Editing a shipped theme forks it; give the fork a name to keep it"
    divider: false
    controlWidth: root.custom ? 380 : 292

    Row {
        anchors.right: parent.right
        anchors.verticalCenter: parent.verticalCenter
        spacing: 7

        Rectangle {
            width: 196
            height: 31
            radius: 8
            color: Theme.alpha(Theme.fg, 0.05)
            border.width: nameInput.activeFocus ? 2 : 1
            border.color: nameInput.activeFocus ? Theme.accent : Theme.alpha(Theme.fg, 0.12)

            TextInput {
                id: nameInput

                anchors.fill: parent
                anchors.leftMargin: 10
                anchors.rightMargin: 10
                activeFocusOnTab: true
                verticalAlignment: TextInput.AlignVCenter
                maximumLength: 40
                color: Theme.fg
                selectionColor: Theme.alpha(Theme.accent, 0.35)
                selectedTextColor: Theme.fg
                font.family: Theme.fontFamily
                font.pixelSize: Theme.fontSizeSmall

                Accessible.role: Accessible.EditableText
                Accessible.name: "Theme name"

                Text {
                    anchors.verticalCenter: parent.verticalCenter
                    visible: nameInput.text === "" && !nameInput.activeFocus
                    text: "Theme name"
                    color: Theme.fgMuted
                    font: nameInput.font
                }

                onAccepted: saveButton.save()
            }
        }

        SettingsButton {
            id: saveButton

            text: "Save theme"
            tone: "accent"
            activeFocusOnTab: true
            border.width: activeFocus ? 2 : 0
            border.color: activeFocus ? Theme.fg : "transparent"

            function save(): void {
                if (ThemeProfiles.saveProfile(nameInput.text))
                    nameInput.text = "";
            }

            onClicked: saveButton.save()
            Keys.onReturnPressed: saveButton.save()
            Keys.onSpacePressed: saveButton.save()
        }

        SettingsButton {
            id: deleteButton

            visible: root.custom
            text: "Delete"
            tone: "danger"
            activeFocusOnTab: visible
            border.width: activeFocus ? 2 : 1
            border.color: activeFocus ? Theme.danger : Theme.alpha(Theme.danger, 0.45)

            function remove(): void {
                ThemeProfiles.deleteProfile(ThemeProfiles.activeId);
            }

            onClicked: deleteButton.remove()
            Keys.onReturnPressed: deleteButton.remove()
            Keys.onSpacePressed: deleteButton.remove()
        }
    }
}