import QtQuick 2.15
import Hedgewars 1.0

Item {
  id: control

  property string dataPrefix: "share/hedgewars/Data/"
  property url themePath: "file://%1Themes/Stage/".arg(dataPrefix)

  Flickable {
    id: backgroundContainer

    anchors.fill: parent

    contentWidth: map.implicitWidth
    contentHeight: map.implicitHeight

    interactive: false
    contentX: mapContainer.contentX * 0.7 + (contentWidth - width) * 0.15
    contentY: mapContainer.contentY * 0.7 + (contentHeight - height) * 0.3

    Rectangle {
      anchors.fill: parent
      color: "black"
    }

    Item {
      width: parent.width
      height: parent.height
      anchors.horizontalCenter: parent.horizontalCenter
      anchors.bottom: parent.bottom

      Image {
        id: skyLeft
        anchors.left: parent.left
        anchors.right: skyCenter.left
        anchors.bottom: parent.bottom
        fillMode: Image.TileHorizontally
        horizontalAlignment: Image.AlignRight
        source: control.themePath + "SkyL.png"
      }

      Image {
        id: skyCenter
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.bottom: parent.bottom
        fillMode: Image.Pad
        source: control.themePath + "Sky.png"
      }

      Image {
        id: skyRight
        anchors.left: skyCenter.right
        anchors.right: parent.right
        anchors.bottom: parent.bottom
        fillMode: Image.TileHorizontally
        horizontalAlignment: Image.AlignLeft
        source: control.themePath + "SkyL.png"
      }
    }
  }

  Flickable {
    id: mapContainer

    anchors.fill: parent

    boundsMovement: Flickable.StopAtBounds

    contentWidth: map.implicitWidth
    contentHeight: map.implicitHeight

    onContentXChanged: map.update()
    onContentYChanged: map.update()
    onWidthChanged: map.update()
    onHeightChanged: map.update()

    pixelAligned: true

    TiledImageItem {
      id: map

    }
  }

  MouseArea {
    anchors.fill: mapContainer

    property double zoom: 1.0

    acceptedButtons: Qt.NoButton

    enabled: false

    onWheel: wheel => {
               zoom = zoom * Math.exp(wheel.angleDelta.y * 0.001)
               var zoomPoint = Qt.point(wheel.x + mapContainer.contentX,
                                    wheel.y + mapContainer.contentY);

               map.scale = zoom
               mapContainer.resizeContent(map.implicitWidth * zoom, map.implicitHeight * zoom, zoomPoint);
               mapContainer.returnToBounds();
               console.log(mapContainer.scale)
             }
  }


  Component.onCompleted: {
    map.test(dataPrefix + "Maps/Ropes/map.png")
    console.log(Screen.devicePixelRatio)
  }
}