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)

  }

}