// Naming what you built.
//
// Saving snapshots the palette, the terminal colors 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"
    // Armed, the row says what the delete actually costs: a saved theme is the
    // only copy of its palette, terminal colors and effect values.
    detail: deleteConfirm.armed
        ? "Deletes “" + String(ThemeProfiles.activeProfile.name ?? "this theme")
            + "” — its palette, terminal colors and effects go with it"
        : (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 ? (deleteConfirm.armed ? 470 : 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()
        }

        ConfirmAction {
            id: deleteConfirm

            visible: root.custom
            actionId: "theme-profile-delete:" + ThemeProfiles.activeId
            armText: "Delete…"
            confirmText: "Delete it"
            onConfirmed: ThemeProfiles.deleteProfile(ThemeProfiles.activeId)
        }
    }
}