import QtQuick 2.15
import QtQuick.Controls 2.15
import "../LtgWidgets" // For LtgButton

Item {
    width: 600
    height: 200  // Increased height to accommodate the circle and buttons
	
	
	// Signal to LoopToGo
	signal ltgExecute(ltgType: string, ltgAction: string, ltgParameters: string)
	
	// Variables from LoopToGo that will be used in this qml file
	Component.onCompleted: {
        loopToGo.registerProperty("isPlaying", "bool");
        loopToGo.registerProperty("isRecording", "bool");
        loopToGo.registerProperty("isPaused", "bool");
    }

    Rectangle {
		id: mainRectangle
        width: parent.width
        height: parent.height
        color: "#353535"  // Dark background color
        anchors.centerIn: parent
		
		// Title
		Text {
			id: titleText
			
			text: "Transport Panel"			
			color: "#eeeeee"			
			horizontalAlignment: Text.AlignHCenter  // Ensures text alignment inside the box
			anchors.top: parent.top	
			anchors.horizontalCenter: parent.horizontalCenter  // Centers the text horizontally				
			anchors.margins: mainRectangle.height*.17				
			font.pixelSize: 18
            font.bold: true			
			
		}
		
				
		// Small Button with Image (Bottom-left corner)
		LtgLogoButton {
			width: mainRectangle.width * 0.05
			height: width
		}        
		

        Grid {
            verticalItemAlignment: Grid.AlignVCenter
            horizontalItemAlignment: Grid.AlignHCenter
            rows: 2
            columns: 5
            spacing: 10
            anchors.centerIn: parent

            // Empty item for column 0, row 0 (if needed, adjust accordingly)
            Rectangle {
                width: 10
                height: 10
                color: "#4b4646"
                opacity: 0  // Makes the rectangle fully invisible
            }

            // Empty item for column 1, row 0 (if needed, adjust accordingly)
            Rectangle {
                width: 10
                height: 10
                color: "#4b4646"
                opacity: 0  // Makes the rectangle fully invisible

            }
            // Empty item for column 2, row 0 (if needed, adjust accordingly)
            Rectangle {
                width: 10
                height: 10
                color: "#4b4646"
                opacity: 0  // Makes the rectangle fully invisible

            }
           
            // Circle in the grid Above the play button
            Rectangle {
                width: mainRectangle.width*.05
                height: width
				
				color: (loopToGo.properties && loopToGo.properties["isPlaying"] !== undefined && loopToGo.properties["isPaused"] !== undefined) ?
					(loopToGo.properties["isPlaying"] 
					? (loopToGo.properties["isPaused"] ? "orange" : "#4CAF50") 
					: "#4b4646") :
					"#000000"  // Default color before the property is available

					
                radius: width/2
            }

            // Circle in the grid Above the record button
            Rectangle {
                width: mainRectangle.width*.05
                height: width
				
				color: (loopToGo.properties && loopToGo.properties["isRecording"] !== undefined && loopToGo.properties["isPaused"] !== undefined) ?
					(loopToGo.properties["isRecording"] 
					? (loopToGo.properties["isPaused"] ? "orange" : "#AF4646") 
					: "#4b4646") :
					"#000000"  // Default color before the property is available								

                radius: width/2
            }

            // Button 1 (placed in row 1, column 0)
            LtgButton {
				text: "Rewind all"

				ltgType: "shortcut"
				ltgAction: "shortcutByID"
				ltgParameters: "-1000"

                width: mainRectangle.width*.17
                height: mainRectangle.height*.2
  
                font.pixelSize: 14
                background: Rectangle {
                    color: parent.pressed ? "#1976D2" : "#2196F3"
                    radius: 10
                }
                font.bold: true
            }

            // Button 2 (placed in row 1, column 1)
            LtgButton {
                text: "Rewind"
				
				ltgType: "shortcut"
				ltgAction: "shortcutByID"
				ltgParameters: "-999"
				
                width: mainRectangle.width*.17
                height: mainRectangle.height*.2
				
                font.pixelSize: 14
                background: Rectangle {
                    color: parent.pressed ? "#1976D2" : "#2196F3"
                    radius: 10
                }
                font.bold: true
            }

            // Button 3 (placed in row 1, column 2)
            LtgButton {
                text: "Stop"
				
				ltgType: "shortcut"
				ltgAction: "shortcut"
				ltgParameters: "Q"
				
                width: mainRectangle.width*.17
                height: mainRectangle.height*.2

                font.pixelSize: 14
                background: Rectangle {
                    color: parent.pressed ? "#E65100" : "#FF9800"
                    radius: 10
                }
                font.bold: true
            }
            

            // Button 4 (Play button, placed in row 1, column 3)
            LtgButton {
                text: "Play"
				
				ltgType: "shortcut"
				ltgAction: "shortcutByID"
				ltgParameters: "-997"
				
                width: mainRectangle.width*.17
                height: mainRectangle.height*.2

                font.pixelSize: 14
                background: Rectangle {
                    color: parent.pressed ? "#388E3C" : "#4CAF50"
                    radius: 10
                }
                font.bold: true
            }

            // Button 5 (Record button, placed in row 1, column 4)
            LtgButton {
                text: "Record"
				
				ltgType: "shortcut"
				ltgAction: "shortcutByID"
				ltgParameters: "39"
				
                width: mainRectangle.width*.17
                height: mainRectangle.height*.2

                font.pixelSize: 14
                background: Rectangle {
                    color: parent.pressed ? "#B71C1C" : "#F44336"
                    radius: 10
                }
            }
			
            
        }
    }
}
