import QtQuick 2.0
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.0

import "../components"
import "../components/layout"

import de.itsblue.ScStw 2.0
import de.itsblue.ScStw.Styling 2.0
import de.itsblue.ScStw.Styling.Components 1.0

ToolBar {
    id: control

    property bool connectedToBase: speedBackend.scStwClient.state === ScStwClient.CONNECTED

    GridLayout {
        id: bottomContentLayout

        anchors {
            left: parent.left
            leftMargin: app.landscape() ? 0:parent.width * 0.1
            right: parent.right
            rightMargin: app.landscape() ? 0:parent.width * 0.1
            top: parent.top
            topMargin: app.landscape() ? parent.height * 0.1:0
            bottom: parent.bottom
            bottomMargin: app.landscape() ? parent.height * 0.1:0
        }

        columns: app.landscape() ? 1:2
        rows: app.landscape() ? 2:1

        FancyButton {
            id: settingsButt

            Layout.alignment: Layout.Center
            Layout.preferredHeight: app.landscape() ? width:control.height * 0.8
            Layout.preferredWidth: app.landscape() ? control.width * 0.8:height

            onClicked: {
                settingsDialog.open()
            }

            image: appTheme.theme.images.settIcon

            backgroundColor: parent.pressed ? appTheme.theme.colors.buttonPressed:appTheme.theme.colors.button

        }

        FancyButton {
            id: profilesButt

            property double size

            state: control.connectedToBase ? "visible":"hidden"
            visible: size > 0

            Layout.alignment: Layout.Center
            Layout.preferredWidth: app.landscape() ? control.width * size:control.height * size
            Layout.preferredHeight: width

            image: appTheme.theme.images.profilesIcon

            backgroundColor: parent.pressed ? appTheme.theme.colors.buttonPressed:appTheme.theme.colors.button

            onClicked: {
                profilesDialog.open()
            }

            states: [
                State {
                    name: "hidden"
                    PropertyChanges {
                        target: profilesButt
                        size: 0
                    }
                },
                State {
                    name: "visible"
                    PropertyChanges {
                        target: profilesButt
                        size: 0.8
                    }
                }
            ]

            transitions: [
                Transition {
                    NumberAnimation {
                        duration: 200
                        properties: "size"
                    }
                }
            ]
        }
    }
}