// Copyright (C) 2024 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial
import QtQuick 2.0
import QtQuickUltralite.Extras 2.0

ItemWithAcivationAnimations {
    id: root
    width: 800
    height: 480

    welcomeAnimationDuration: 500
    welcomeAnimationDelay: 500

    property bool isDayMode: true

    property color fontColor: isDayMode ? Style.black : Style.white
    property color fontColorPrime: !isDayMode ? Style.black : Style.white
    property color insideRoundRecColor: isDayMode ? Style.white : Style.backgroundBlue

    onActiveChanged: {
        if(active) {
            typingAnimation.start()
        }
    }

    InputTextField {
        id: inputText
        anchors.top: root.top
        anchors.topMargin: 30
        anchors.horizontalCenter: root.horizontalCenter
        text: "|"
        color: fontColor
    }

    ColorizedImage {
        id: homeButton
        source: "qrc:///images/keyboard/go-home-key.png"
        anchors.top: root.top
        anchors.topMargin: 110
        anchors.left: root.left
        anchors.leftMargin: 80
        color: fontColor
    }

    ColorizedImage {
        id: workButton
        source: "qrc:///images/keyboard/go-work-key.png"
        anchors.top: homeButton.top
        anchors.left: homeButton.right
        anchors.leftMargin: 18
        color: fontColor
    }

    TextInRoundedBox {
        id: target0

        opacity: 0
        anchors.left: workButton.horizontalCenter
        anchors.leftMargin: 38
        anchors.top: root.top
        anchors.topMargin: 84

        color: fontColor
        text:  "Supermarket 2 km"
        textColor: fontColor
        textColorPrime: fontColorPrime
        insideColor: insideRoundRecColor
        insideOpacity: 1
    }

    TextInRoundedBox {
        id: target1

        opacity: 0
        anchors.left: target0.left
        anchors.top: target0.bottom
        anchors.topMargin: 10

        color: fontColor
        text: "Grocery Store 42 km"
        textColor: fontColor
        textColorPrime: fontColorPrime
        insideColor: insideRoundRecColor
        insideOpacity: 1
    }

    Keyboard {
        id: keyboard
        anchors.bottom: root.bottom
        anchors.bottomMargin: 66
        isDayMode: root.isDayMode
    }

    ColorizedImage {
        id: hiddeButton
        source: "qrc:///images/keyboard/minimize-keyboard.png"
        anchors.bottom: root.bottom
        anchors.bottomMargin: 32
        anchors.horizontalCenter: parent.horizontalCenter
        color: fontColor
    }

    function resetView() {
        inputText.text = "|"
        target1.textColor = fontColor
        target1.insideOpacity = 1
        target0.opacity = 0
        target1.opacity = 0
    }

    readonly property int typingTimeMs: 300
    readonly property int restingTimeMs: 200
    SequentialAnimation {
        id: typingAnimation
        PauseAnimation { duration: typingTimeMs + welcomeAnimationDelay + welcomeAnimationDuration*2 }
        ScriptAction { script: { keyboard.setActiveKey("S"); inputText.text = "s|" } }
        PauseAnimation { duration: typingTimeMs }
        ScriptAction { script: { keyboard.setActiveKey("") } }
        PauseAnimation { duration: restingTimeMs }
        ScriptAction { script: { keyboard.setActiveKey("T"); inputText.text = "st|" } }
        PauseAnimation { duration: typingTimeMs }
        ScriptAction { script: { keyboard.setActiveKey("") } }
        PauseAnimation { duration: restingTimeMs }
        ScriptAction { script: { keyboard.setActiveKey("O"); inputText.text = "sto|" } }
        PauseAnimation { duration: typingTimeMs }
        ScriptAction { script: { keyboard.setActiveKey("") } }
        PauseAnimation { duration: restingTimeMs }
        ScriptAction { script: { keyboard.setActiveKey("R"); inputText.text = "stor|" } }
        PauseAnimation { duration: typingTimeMs }
        ScriptAction { script: { keyboard.setActiveKey("") } }
        PauseAnimation { duration: restingTimeMs }
        ScriptAction { script: { keyboard.setActiveKey("E"); inputText.text = "store|" } }
        PauseAnimation { duration: restingTimeMs }
        ScriptAction { script: { keyboard.setActiveKey(""); target0.opacity = 1; target1.opacity = 1 } }
        PauseAnimation { duration: typingTimeMs*3 }
        ScriptAction { script: { target1.setActive() } }
    }
}