import QtQuick
import QtQuick.Controls
import Qt.labs.qmlmodels

ApplicationWindow {
  visible: true
  width: 640
  height: 480
  title: qsTr("HeaderView")

  Item {
    anchors.fill: parent


    Loader {
      id: horizontalHeaderLoader
      anchors {
        top: parent.top
        left: tableView.left
      }

      sourceComponent: HorizontalHeaderView {
        id: horizontalHeader
        syncView: tableView
        clip: true
      }
    }

    Loader {
      id: verticalHeaderLoader
      anchors {
        top: tableView.top
        left: parent.left
      }

      sourceComponent: VerticalHeaderView {
        syncView: tableView
        clip: true
      }
    }

    TableView {
      id: tableView
      anchors.left: verticalHeaderLoader.active ? verticalHeaderLoader.right : parent.left
      anchors.top: horizontalHeaderLoader.active ? horizontalHeaderLoader.bottom : parent.top
      anchors.right: parent.right
      anchors.bottom: parent.bottom
      clip: true

      columnSpacing: 1
      rowSpacing: 1

      model: TableModel {
        TableModelColumn { display: "name" }
        TableModelColumn { display: "color" }

        rows: [
          {
            "name": "cat",
            "color": "black"
          },
          {
            "name": "dog",
            "color": "brown"
          },
          {
            "name": "bird",
            "color": "white"
          }
        ]
      }

      delegate: Rectangle {
        implicitWidth: 100
        implicitHeight: 20
        color: palette.base
        Label {
          text: display
        }
      }
    }
  }

  Button {
    text: "VHeader Show/hide"
    onClicked: {
      verticalHeaderLoader.active = !verticalHeaderLoader.active
      print(verticalHeaderLoader.active)
    }
    y: 200
  }

  Button {
    text: "HHeader Show/hide"
    onClicked: {
      horizontalHeaderLoader.active = !horizontalHeaderLoader.active
      print(horizontalHeaderLoader.active)
    }
    x: 150
    y: 200
  }
}