import QtQuick
import QtQuick.Window
import QtQuick.Controls as QtC
import Qt.labs.qmlmodels

Window {
    id: root

    // Some width larger than the combined with of the columns just so there is
    // no pooled columns at startup.
    width: tableView.columnWidthArray.reduce((partialSum, n) => partialSum + n, 0) + 200
    height: 480
    visible: true
    title: qsTr("TableView columnWidthProvider Issue")

    TableView {
        id: tableView

        anchors.fill: parent
        columnSpacing: 1
        rowSpacing: 1
        clip: true

        // Very simple columnWidthProvider implementation. Just a simple list
        // of static values.
        readonly property list<int> columnWidthArray: [100, 200, 150, 300, 250]
        columnWidthProvider: function(column) {
            return tableView.columnWidthArray[column]
        }

        // A very simple TableModel that gives us enough columns to trigger
        // column pooling after scrolling horizontally.
        model: TableModel {
            TableModelColumn { display: "name" }
            TableModelColumn { display: "color" }
            TableModelColumn { display: "legs" }
            TableModelColumn { display: "wings" }
            TableModelColumn { display: "lifespan" }

            rows: [
                {
                    "name": "cat",
                    "color": "black",
                    "legs": "4",
                    "wings": "0",
                    "lifespan": "15",
                },
                {
                    "name": "dog",
                    "color": "brown",
                    "legs": "4",
                    "wings": "0",
                    "lifespan": "10",
                },
                {
                    "name": "bird",
                    "color": "white",
                    "legs": "2",
                    "wings": "2",
                    "lifespan": "20",
                }
            ]
        }

        // Basic delegate to show the value for each cell.
        delegate: Rectangle {
            implicitWidth: 100
            implicitHeight: 50
            border.width: 1

            Text {
                text: display
                anchors.centerIn: parent
            }

            // Console log pooled signal to verify that delegates are being pooled.
            TableView.onPooled: console.log("pooled")
        }

        // This is the improtant part. This Rectangle should always fill the
        // width of the window but due to the contentX issue is will appear
        // partially offscreen after a while.
        Rectangle {
            id: headerContainer
            width: Math.max(tableView.width, tableView.contentWidth)
            height: 40
            z: 3
            color: "black"
            opacity: 0.8

            Text {
                anchors.left: parent.left
                color: "white"
                text: "This is the headerContainer, it should always fill the TableView width"
            }

            Text {
                anchors.right: parent.right
                color: "cyan"
                text: "headerContainer.x: " + headerContainer.x + " | tableView.contentX: " + tableView.contentX
            }
        }

        QtC.ScrollBar.horizontal: QtC.ScrollBar {
            id: horizontalScrollBar
            policy: QtC.ScrollBar.AlwaysOn
            visible: tableView.contentWidth > tableView.width
        }
    }


    Text {
        id: walkthroughText
        property int state: 0
        property list<string> textState: ["TableView initially shows correctly", "Resize the window horizontally to pool columns", "Scroll to the right", "Full screen window", "Notice that the header no longer fills the width", "TableView contentX is also now non-zero", "Resize window back to original size does not fix issue.", "And TableView is now forever in this broken state."]
        font.pixelSize: 30
        text: textState[state]
        width: parent.width
        wrapMode: Text.WrapAtWordBoundaryOrAnywhere
        anchors.bottom: parent.bottom
    }

    MouseArea {
        height: 200
        width: 200
        onClicked: walkthroughText.state += 1
    }
}