import QtQuick 6.5
import QtQuick.Controls.Fusion 6.5 // So we can overload the native style!
import QtQuick.Layouts 2.15
import QtQuick.Effects // required for MultiEffects


import "../LtgWidgets"

Item {
    width: 600
    height: 225
	

	
    // Instruction text property
    property string instructionText: 
		"<h3>How to use this 4 button looper emulator</h3><p>  
		<p>Create at least 2 tracks with input and output(s) 
		<p>Press the Loop button to start recording. 
		<p>Press again to stop recording and loop.
		<p>Press again to start a new recording on the same track.
		<br>
		<p>Press the Change track button to select a new Track.
		<p>The Loop button will now create loops on this track
		<br>
		<p>Press the reset button to clear the song.
		<br>
		<h4>To use this looper with a MIDI pedal or MIDI controller</h4>
		<p>Right-click on the Loop button to assign each button to a MIDI event (MIDI learn...)."

    // 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("lastCreatedRecordLoopColor", "string");
		loopToGo.registerProperty("selectedTrack", "string");
		loopToGo.registerProperty("pDontChangeTrackMonitoring", "bool");
		loopToGo.registerProperty("pNbMaxSecs", "int");

		
		Qt.callLater(() => {
					loopToGo.ltgExecute("scriptCommand", "setLooperMode", "1 1");  // 1 for FreeNoSync, 1 for add to stack
					});
	}
	
	Component.onDestruction: {
		loopToGo.ltgExecute("scriptCommand", "resetLooperMode", "");		
	}	
	
    // Rectangle as the background
    Rectangle {
		id: mainRectangle
        width: parent.width
        height: parent.height
        color: "#353535"  // Dark background color
		
		// Title
		Text {
			id: titleText
			
			text: "Simple looper - 4b"			
			color: "#eeeeee"			
			anchors.top: parent.top	
			anchors.horizontalCenter: parent.horizontalCenter  // Centers the text horizontally			
			anchors.margins: mainRectangle.height*.11	
			font.pixelSize: 18
            font.bold: true			
			
		}
		
		// Selected track name
		Text {
			id: selectedTrackText
			
			text: {
				var selectedTrack = loopToGo.properties["selectedTrack"];
				// Check if the property exists and is not "0" or undefined
				return (selectedTrack && selectedTrack !== "0") ? selectedTrack : "";
			}
			color: "#1c7eff"			
			anchors.bottom: parent.bottom	
			anchors.horizontalCenter: parent.horizontalCenter  // Centers the text horizontally			
			anchors.margins: mainRectangle.height*.14
			font.pixelSize: 22
            font.bold: true			
			
		}

		// Small Button with Image (Bottom-left corner)
		LtgLogoButton {
			id: logoButton
			width: 35
			height: width
			anchors.bottom: parent.bottom
			anchors.left: parent.left
			anchors.margins: 7	
		}
	    
		// Help Button (Top-right corner)
        LtgHelpButton {
            // Show instructions when clicked
			onClicked: {
				messageWindow.show();
			}
        }

		// Message dialog to display instructions		
		LtgMessageWindow {
			id: messageWindow
			title: "Instructions"
			
		}


		// --- Max Secs Selector ---
        Row {
            spacing: 8
            anchors.bottom: parent.bottom
			anchors.left: parent.left
			anchors.leftMargin: mainRectangle.width*.2
			anchors.bottomMargin: mainRectangle.height*.03

            Text {
                text: "Max nb of secs:"
                color: "#EEEEEE"
                font.pixelSize: mainRectangle.width*.018
                anchors.verticalCenter: parent.verticalCenter
            }

            SpinBox {
                id: barSpinBox
                from: 15
                to: 60
                value: loopToGo.properties["pNbMaxSecs"] !== undefined ? loopToGo.properties["pNbMaxSecs"] : 20
                editable: true
				
				onValueChanged: {
					loopToGo.ltgExecute("scriptCommand", "persistentVariable", "pNbMaxSecs " + value);
				}
                
                // Custom styling to fit your UI
                contentItem: TextInput {
                    text: barSpinBox.textFromValue(barSpinBox.value, barSpinBox.locale)
                    font.pixelSize: mainRectangle.width*.02
                    color: "white"
                    horizontalAlignment: Qt.AlignHCenter
                    verticalAlignment: Qt.AlignVCenter
                }
                background: Rectangle {
                    implicitWidth: 50
                    implicitHeight: 25
                    color: "#444444"
                    border.color: "#888888"
                    radius: 4
                }
            }
        }
		
		LtgButton {
			id: toggleChangeTrackMonitoring
			
			width: mainRectangle.width*.03
			height: width
			
			ltgType: "loadScript"
			ltgAction: "LoopToGo/togglePersistentVariable.ltgs"
			ltgParameters: "pDontChangeTrackMonitoring"
			
			anchors.bottom: parent.bottom
			anchors.left: parent.left
			anchors.leftMargin: mainRectangle.width*.6
			anchors.bottomMargin: mainRectangle.height*.05
			
			background: Rectangle {
				
				color: loopToGo.properties["pDontChangeTrackMonitoring"] ? "green" : "gray"
				radius: 4
			}
			Text {
				text: "Keep User Monitoring Settings"
				color: loopToGo.properties["pDontChangeTrackMonitoring"] ? "#EEEEEE" : "#999999"
				font.pixelSize: mainRectangle.width*.02
				verticalAlignment: Text.AlignVCenter
				
				anchors.verticalCenter: toggleChangeTrackMonitoring.verticalCenter
				anchors.left : toggleChangeTrackMonitoring.right
				anchors.leftMargin: implicitHeight * 0.7
			}
			
		}		
		
		RowLayout {
			anchors.fill: parent
			spacing: 40
			anchors.margins: 40	

													
			Item {
				id: i1

				Layout.fillWidth: true
				Layout.fillHeight: true  // Make it resizable

				

				// Rectangle around loop button to indicate looper state
				Rectangle{
					id: r1

					width: loopButton.width + 8
					height: loopButton.height + 8
									
					anchors.centerIn: parent

									
					color: (loopToGo.properties && loopToGo.properties["lastCreatedRecordLoopColor"] !== undefined) ?
						(loopToGo.properties["lastCreatedRecordLoopColor"] === "0" ? "#000000" : loopToGo.properties["lastCreatedRecordLoopColor"]) :
						"#000000"  // Default color before the property is available
					radius: 15			           
				}
					
				// Loop Button 
				LtgButton {
					text: "Loop"
					id: loopButton


					ltgType: "loadScript"
					ltgAction: "LoopToGo/LooperEmulations/dtOne.ltgs"
					ltgParameters: "-1 -1 1" // -1 : selected track
					ltgArmEnabled: true // This buttons supports audio arming action
					ltgArmScript: "LoopToGo/audioTrigger.ltgs"
					
					anchors.centerIn: parent

												
					width: mainRectangle.width * 0.2

					height: mainRectangle.height * 0.35

					font.pixelSize: 18
					background: Rectangle {
						color: parent.pressed ? "#388E3C" : "#4CAF50"
						radius: 10
					}
					font.bold: true
				}
			}
				
					
			Item {
				Layout.fillWidth: true
				Layout.fillHeight: true  // Make it resizable
					
					
				// Change track Button 
				LtgButton {
					text: "Change\ntrack"
					id: changeTrackButon
					
					ltgType: "shortcut"
					ltgAction: "shortcutByID"
					ltgParameters: "33"
					

					
					//anchors.right: parent.right  // Position the button on the right
					
					//anchors.leftMargin: 10  // Add custom margin for spacing
					//anchors.topMargin: 10
					
					anchors.centerIn: parent
														
										
					width: mainRectangle.width * 0.2
					height: mainRectangle.height * 0.35


					font.pixelSize: 18
					background: Rectangle {
						color: parent.pressed ? "#104892" : "#1a74ea"
						radius: 10
					}
					font.bold: true
				}
			}
			
			Item {
				Layout.fillWidth: true
				Layout.fillHeight: true  // Make it resizable
			
			
				// Undo Button 
				LtgButton {
					text: "Undo"
					
					ltgType: "shortcut"
					ltgAction: "shortcut"
					ltgParameters: "Ctrl+Z"
					

					anchors.centerIn: parent		
					
					width: mainRectangle.width * 0.2
					height: mainRectangle.height * 0.35

					font.pixelSize: 18
					background: Rectangle {
						color: parent.pressed ? "#E08000" : "#FF9800"  // Dark red when pressed, bright red otherwise
						radius: 10
					}
					font.bold: true
				}
			}
				
			
			Item {
				Layout.fillWidth: true
				Layout.fillHeight: true  // Make it resizable
			
			
				// Reset Button 
				LtgButton {
					text: "Reset"
					
					ltgType: "loadScript"
					ltgAction: "LoopToGo/LooperEmulations/resetSong.ltgs"
					ltgParameters: ""
					

					anchors.centerIn: parent		
					
					width: mainRectangle.width * 0.2
					height: mainRectangle.height * 0.35

					font.pixelSize: 18
					background: Rectangle {
						color: parent.pressed ? "#D32F2F" : "#F44336"  // Dark red when pressed, bright red otherwise
						radius: 10
					}
					font.bold: true
				}
			}
			
			
		}
    }
}
