import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import Flora

Item {
    id: toolbar

    property var targetPane: null
    readonly property bool usable: targetPane !== null

    signal tableRequested()

    implicitHeight: 38

    Rectangle {
        anchors.fill: parent
        color: Theme.toolbarBg
        border.color: Theme.divider

        ScrollView {
            anchors.fill: parent
            anchors.leftMargin: 6
            anchors.rightMargin: 6
            clip: true
            ScrollBar.horizontal.policy: ScrollBar.AsNeeded
            ScrollBar.vertical.policy: ScrollBar.AlwaysOff

            RowLayout {
                height: parent.height
                spacing: 2

                TbButton { enabled: usable; opacity: enabled?1:0.4; text: "B"; tip: qsTr("Жирный (Ctrl+B)"); onTapped: targetPane.applyInline("**", "**") }
                TbButton { enabled: usable; opacity: enabled?1:0.4; text: "I"; tip: qsTr("Курсив (Ctrl+I)"); onTapped: targetPane.applyInline("*", "*") }
                TbButton { enabled: usable; opacity: enabled?1:0.4; text: "U"; tip: qsTr("Подчёркнутый"); onTapped: targetPane.applyInline("<u>", "</u>") }
                TbButton { enabled: usable; opacity: enabled?1:0.4; text: "S"; tip: qsTr("Зачёркнутый"); onTapped: targetPane.applyInline("~~", "~~") }
                TbButton { enabled: usable; opacity: enabled?1:0.4; text: "=="; tip: qsTr("Выделение"); onTapped: targetPane.applyInline("==", "==") }

                TbButton {
                    enabled: usable; opacity: enabled?1:0.4
                    text: "A"; tip: qsTr("Цвет текста"); bold: true
                    onTapped: { colorPopup.highlightMode = false; colorPopup.openAt(this) }
                }
                TbButton {
                    enabled: usable; opacity: enabled?1:0.4
                    text: "A"; tip: qsTr("Цвет выделения"); accent: true
                    onTapped: { colorPopup.highlightMode = true; colorPopup.openAt(this) }
                }

                TbButton { enabled: usable; opacity: enabled?1:0.4; text: "x²"; tip: qsTr("Верхний индекс"); onTapped: targetPane.applySubSup("sup") }
                TbButton { enabled: usable; opacity: enabled?1:0.4; text: "x₂"; tip: qsTr("Нижний индекс"); onTapped: targetPane.applySubSup("sub") }

                Item { width: 8 }
                Rectangle { width: 1; height: 20; color: Theme.divider }
                Item { width: 8 }

                TbButton { enabled: usable; opacity: enabled?1:0.4; text: "H#"; tip: qsTr("Заголовок"); onTapped: headingMenu.popup(this) }
                TbButton { enabled: usable; opacity: enabled?1:0.4; text: "☰"; tip: qsTr("Списки"); onTapped: listMenu.popup(this) }
                TbButton { enabled: usable; opacity: enabled?1:0.4; text: "❝"; tip: qsTr("Цитата"); onTapped: targetPane.applyLinePrefix("> ") }
                TbButton { enabled: usable; opacity: enabled?1:0.4; text: "⚠"; tip: qsTr("Выноска"); onTapped: calloutMenu.popup(this) }
                TbButton { enabled: usable; opacity: enabled?1:0.4; text: "▦"; tip: qsTr("Таблица"); onTapped: toolbar.tableRequested() }
                TbButton { enabled: usable; opacity: enabled?1:0.4; text: "⊡"; tip: qsTr("Обтекание"); onTapped: targetPane.applyFloatWrap() }
            }
        }
    }

    Menu {
        id: headingMenu
        title: qsTr("Заголовок")
        Repeater {
            model: [1, 2, 3, 4, 5, 6]
            MenuItem {
                text: "H" + modelData + " — " + "######".slice(0, modelData)
                onTriggered: targetPane.applyHeading(modelData)
            }
        }
    }

    Menu {
        id: listMenu
        title: qsTr("Список")
        MenuItem { text: qsTr("Маркированный"); onTriggered: targetPane.applyLinePrefix("- ") }
        MenuItem { text: qsTr("Нумерованный"); onTriggered: targetPane.applyLinePrefix("1. ") }
        MenuItem { text: qsTr("Задачи (- [ ])"); onTriggered: targetPane.applyTaskToggle() }
    }

    Menu {
        id: calloutMenu
        title: qsTr("Выноска")
        Repeater {
            model: ["NOTE", "INFO", "WARN", "ERROR"]
            MenuItem { text: modelData; onTriggered: targetPane.applyCallout(modelData) }
        }
    }

    property var colorList: [
        "#000000", "#ffffff", "#9e9e9e", "#795548", "#607d8b",
        "#f44336", "#ff9800", "#ffeb3b", "#4caf50", "#00bcd4",
        "#2196f3", "#3f51b5", "#9c27b0", "#e91e63"
    ]

    Popup {
        id: colorPopup
        property bool highlightMode: false
        function openAt(btn) { x = btn.mapToItem(toolbar, 0, 0).x; y = btn.mapToItem(toolbar, 0, 0).y + btn.height + 4; open() }
        width: grid.width + 16
        height: grid.height + 16
        background: Rectangle { color: Theme.surface; border.color: Theme.borderStrong; radius: 8 }
        Grid {
            id: grid
            anchors.centerIn: parent
            columns: 7
            spacing: 4
            Repeater {
                model: toolbar.colorList
                delegate: Rectangle {
                    width: 24; height: 24; radius: 6
                    color: modelData
                    border.color: modelData === "#ffffff" ? Theme.borderStrong : "transparent"
                    border.width: 1
                    MouseArea {
                        anchors.fill: parent
                        cursorShape: Qt.PointingHandCursor
                        onClicked: { toolbar.targetPane.applyColor(modelData, colorPopup.highlightMode); colorPopup.close() }
                    }
                }
            }
        }
    }
}