import QtQuick
import QtQuick.Controls

Rectangle {
    id: root
    anchors.fill: parent
    border.color: "black"
    border.width: 2
    color: "transparent"
    readonly property int radius:  width * 0.025

    Component.onCompleted:
    {
        mapView.positionSource.start()
        weatherDetailsData.populate(mapView.positionSource.position.coordinate)
    }

    CustomInputField
    {
        id: inputFrom
        width: parent.width - (2 * anchors.margins)
        height: parent.height * 0.05
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.top: parent.top
        anchors.margins: parent.width * 0.01
        anchors.topMargin: parent.width * 0.02
        logoSrc: "qrc:/images/start_location.svg"
        placeHolderText: "Start"
        z: mapView.z + 1
        radius: root.radius
    }

    CustomInputField
    {
        id: inputTo
        width: parent.width - (2 * anchors.margins)
        height: parent.height * 0.05
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.top: inputFrom.bottom
        anchors.margins: parent.width * 0.01
        logoSrc: "qrc:/images/Destination_location.png"
        placeHolderText: "Destination"
        z: mapView.z + 1
        radius: root.radius
    }

    MapView
    {
        id: mapView
        anchors.fill: parent
        radius: root.radius
    }

    Button
    {
        id: myLocationButton
        width: parent.width * 0.1
        height: width
        anchors.right: parent.right
        anchors.bottom: weatherDetails.top
        anchors.margins: parent.width * 0.01
        background: Rectangle
        {
            anchors.fill: parent
            color:"darkgray"
            radius: width/2
            Image
            {
                source: "qrc:/images/centerToGPS.png"
                fillMode: Image.PreserveAspectFit
                anchors.horizontalCenter: parent.horizontalCenter
                anchors.verticalCenter: parent.verticalCenter
            }
        }
        onClicked:
        {
            mapView.resetZoomLevel()
        }
        z: mapView.z + 1
    }

    WeatherDetailsView
    {
        id: weatherDetails
        width: parent.width
        height: parent.height * 0.1
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.bottom: parent.bottom
        z: mapView.z + 1
        radius: root.radius
        imgSrc: weatherDetailsData.getImgSrc(weatherDetailsData.weatherStatus)
        temperature: weatherDetailsData.temperature
        precipitation: weatherDetailsData.precipitation
        windSpeed: weatherDetailsData.windSpeed
        humidity: weatherDetailsData.humidity
    }
}