import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15


import "../LtgWidgets"

Item {
    width: 600
    height: 350
		
    // Instruction text property
	property string instructionText: 
		"<h3>How to Use the 5-Button Looper Plus Emulator</h3>

		<p><strong>Note:</strong> The \"Looper Plus\" differs from the \"Simple Looper\" in that the second loop 
		<br>can be a multiple of the first. All subsequent loops will match the length of the second loop.</p>

		<p>To begin, create at least two tracks with configured input and output(s).</p>

		<br>Press the <strong>Loop</strong> button to start recording the first loop.
		<br>Press the <strong>Loop</strong> button again to stop recording and loop the current section.
		<br>Press the button once more to begin a new recording on the same track.
		<br><strong>Important:</strong> The new loop will initially be in Record mode, starting overdubbing at bar 1. 
		<br>This second loop will extend as a multiple of the first loop until you press the <strong>Loop</strong> button again. 
		<br>All subsequent loops will follow the length of the second loop.

		<br><br>Press the <strong>Change Track</strong> button to select a different track.
		<br>From this point forward, the <strong>Loop</strong> button will create loops on the selected track.

		<br><br>Pressing the <strong>Pause</strong> button while looping will stop the looper at the end of the current loop. 
		<br>The <strong>Pause</strong> button will turn red and change its label to <strong>Resume</strong>.

		<br><br>Press the <strong>Reset</strong> button to clear the song and reset the looper.

		<h4>Using the Looper with a MIDI Pedal or MIDI Controller</h4>
		<p>Right-click on the <strong>Loop</strong> button to assign it to a MIDI event using the <strong>MIDI Learn</strong> function.</p>
		"

    // 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("isPaused", "bool");
		loopToGo.registerProperty("isRecording", "bool");
		
		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: "Looper Plus - 5b"			
			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*.05
			font.pixelSize: parent.width*.03
            font.bold: true			
			
		}

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

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

		ColumnLayout {
																		
			anchors.fill: parent
			spacing: 5
			anchors.margins: 40	
			anchors.topMargin: mainRectangle.height*.20
			anchors.bottomMargin: mainRectangle.height*.15
			
		
			Item {
				
				Layout.fillWidth: true
				Layout.fillHeight: true  // Make it resizable

				RowLayout {
					anchors.fill: parent
					spacing: 40
					anchors.margins: 40	

						
							
					Item {
						Layout.fillWidth: true
						Layout.fillHeight: true  // Make it resizable
							
							
						// Pause Button 
						LtgButton {
							text: loopToGo.properties["isPaused"] ? 	
								(loopToGo.properties["isRecording"] ? "Resume" : "(Pause)") : (loopToGo.properties["isRecording"] ? "Pause" : "(Pause)")
							id: pause
							
							ltgType: "loadScript"
							ltgAction: "LoopToGo/LooperEmulations/pauseAll.ltgs"
							ltgParameters: ""
							

							
							//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.2


							font.pixelSize: width*.1
							background: Rectangle {
								color: parent.pressed ? "#523266" : 
								(loopToGo.properties["isRecording"] && loopToGo.properties["isPaused"] ? "#F44336" : "#8450a4")
								
								radius: 10
							}
							font.bold: true
						}
					}
					
					Item {
						Layout.fillWidth: true
						Layout.fillHeight: true  // Make it resizable
					
					
						// Reset Button
						LtgButton {
							text: "Undo"
							
							ltgType: "loadScript"
							ltgAction: "LoopToGo/LooperEmulations/undo.ltgs"
							ltgParameters: ""
							

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

							font.pixelSize: width*.1
							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 (Smaller and Centered)
						LtgButton {
							text: "Reset"
							
							ltgType: "loadScript"
							ltgAction: "LoopToGo/LooperEmulations/resetSong.ltgs"
							ltgParameters: ""
							

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

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

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


				RowLayout {
						anchors.fill: parent
						spacing: 40
						anchors.margins: 40	
						anchors.leftMargin: mainRectangle.width*.2	
						anchors.rightMargin: mainRectangle.width*.2	



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

						// Rectang;le around loop button to indicate looper state
						Rectangle{
							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 (Centered)
						LtgButton {
							text: "Loop"
							id: loopButton

							ltgType: "loadScript"
							ltgAction: "LoopToGo/LooperEmulations/dtPlus.ltgs"
							ltgParameters: "-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.2

							font.pixelSize: width*.1
							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.2


								font.pixelSize: width*.1
								background: Rectangle {
									color: parent.pressed ? "#104892" : "#1a74ea"
									radius: 10
								}
								font.bold: true
							}
						}
				}	
			}	


		}
	}
}
