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

import "../LtgWidgets"

Item {
    width: 650
    height: 325
		
    // Instruction text property
    property string instructionText: 
		"<h3>How to Use the 8-Button Looper Emulator</h3>
		<p>To get started, create at least two tracks with input and output(s) configured.</p>
		<br>Press One of the Track button to begin recording.
		<br>Press the button again to stop recording and loop the current section.
		<br>Press the button once more to start a new recording on the same track.
		<br>
		<br>Press Another Track button to select a different track.
		<br>From this point, the  button will create loops on the selected track.
		<br>
		<br>Pressing the <strong>Pause at End</strong> button while looping will halt the looper at the end of the current loop. 
		<br>Both Pause buttons will turn red and change their label to <strong>Resume</strong>.
		<br>
		<br>Pressing the <strong>Pause Now</strong> button while looping will halt the looper immediatly and set the playhead to the beginning. 
		<br>Both Pause buttons will turn red and change their label to <strong>Resume</strong>.
		<br>
		<br>Press the <strong>Reset</strong> button to clear the song and reset the looper.
		<br>
		<h4>Using the Looper with a MIDI Pedal or MIDI Controller</h4>
		<p>Right-click on the <strong>Loop</strong> button to assign each button 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");
		loopToGo.registerProperty("trackName1", "string");
		loopToGo.registerProperty("trackName2", "string");
		loopToGo.registerProperty("trackName3", "string");
		loopToGo.registerProperty("trackName4", "string");
		loopToGo.registerProperty("loopColorAtPlayHead1", "string");
		loopToGo.registerProperty("loopColorAtPlayHead2", "string");
		loopToGo.registerProperty("loopColorAtPlayHead3", "string");
		loopToGo.registerProperty("loopColorAtPlayHead4", "string");
		
		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 - 8b"			
			color: "#eeeeee"			
			anchors.top: parent.top	
			anchors.horizontalCenter: parent.horizontalCenter  // Centers the text horizontally			
			anchors.margins: mainRectangle.height*.11	
			font.pixelSize: mainRectangle.width * 0.03
            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: mainRectangle.width * 0.04
            font.bold: true			
			
		}

		// Small Button with Image (Bottom-left corner)
		LtgLogoButton {
		}
	    
		// 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: mainRectangle.height*.004
			anchors.margins: mainRectangle.height*.10
			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: mainRectangle.height*.004
					anchors.margins: mainRectangle.height*.12						
							
					Item {  // Pause at end
						Layout.fillWidth: true
						Layout.fillHeight: true  // Make it resizable
							
							
						// Pause Button 
						LtgButton {
							text: loopToGo.properties["isPaused"] ? 	
								(loopToGo.properties["isRecording"] ? "Resume" : "(Pause\nAt End)") : (loopToGo.properties["isRecording"] ? "Pause\nAt End" : "(Pause\nAt End)")
							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.17
							height: mainRectangle.height * 0.2


							font.pixelSize: mainRectangle.width * 0.03
							background: Rectangle {
								color: parent.pressed ? "#523266" : 
								(loopToGo.properties["isRecording"] && loopToGo.properties["isPaused"] ? "#F44336" : "#8450a4")
								
								radius: 10
							}
							font.bold: true
						}
					}
					
					Item {  // Pause now
						Layout.fillWidth: true
						Layout.fillHeight: true  // Make it resizable
					
					
						// Unused Button 
						LtgButton {
							text: loopToGo.properties["isPaused"] ? 	
								(loopToGo.properties["isRecording"] ? "Resume" : "(Pause\nNow)") : (loopToGo.properties["isRecording"] ? "Pause\nNow" : "(Pause\nNow)")
														
							ltgType: "loadScript"
							ltgAction: "LoopToGo/LooperEmulations/pauseAll.ltgs"
							ltgParameters: "1" // 1 means now
							anchors.centerIn: parent		
							
							width: mainRectangle.width * 0.17
							height: mainRectangle.height * 0.2

							font.pixelSize: mainRectangle.width * 0.03
							background: Rectangle {
								color: parent.pressed ? "#523266" : 
								(loopToGo.properties["isRecording"] && loopToGo.properties["isPaused"] ? "#F44336" : "#8450a4")
								
								radius: 10
							}
							font.bold: true
						}
					}
					
					Item {  // Undo
						Layout.fillWidth: true
						Layout.fillHeight: true  // Make it resizable
					
					
						// Reset Button (Smaller and Centered)
						LtgButton {
							text: "Undo"
							
							ltgType: "shortcut"
							ltgAction: "shortcut"
							ltgParameters: "Ctrl+Z"
							

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

							font.pixelSize: mainRectangle.width * 0.03
							background: Rectangle {
								color: parent.pressed ? "#E08000" : "#FF9800"  // Dark red when pressed, bright red otherwise
								radius: 10
							}
							font.bold: true
						}
					}
										
					Item {  // Reset
						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.17
							height: mainRectangle.height * 0.2

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

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

				property bool isValidColor: loopToGo.properties 
                    && loopToGo.properties["lastCreatedRecordLoopColor"] !== undefined

				property string recordLoopColor: isValidColor 
					 ? (loopToGo.properties["lastCreatedRecordLoopColor"] === "0" 
						? "#000000" 
						: loopToGo.properties["lastCreatedRecordLoopColor"]) 
					 : "#000000"

				RowLayout {
						anchors.fill: parent
						spacing: mainRectangle.height*.004
						anchors.margins: mainRectangle.height*.12	
						//anchors.leftMargin: mainRectangle.width*.1	
						//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: loopButton1.width + 8
							height: loopButton1.height + 8
											
							anchors.centerIn: parent
						
							color:  ((loopToGo.properties["loopColorAtPlayHead1"] != undefined) &&
								(loopToGo.properties["loopColorAtPlayHead1"] != "0")) ? loopToGo.properties["loopColorAtPlayHead1"] : "black"	
	
							radius: 15			           
						}
							
						// Loop Button 
						LtgButton {
							text: (loopToGo.properties["trackName1"] != "0" && loopToGo.properties["trackName1"] !== undefined) ? 
								loopToGo.properties["trackName1"] : ""
							id: loopButton1

							ltgType: "loadScript"
							ltgAction: "LoopToGo/LooperEmulations/dtOne.ltgs"
							ltgParameters: "1"
							ltgArmEnabled: true // This buttons supports audio arming action
							ltgArmScript: "LoopToGo/audioTrigger.ltgs"

							anchors.centerIn: parent

														
							width: mainRectangle.width * 0.17

							height: mainRectangle.height * 0.2

							font.pixelSize: mainRectangle.width * 0.03
							background: Rectangle {
								color: parent.pressed ? "#388E3C" : "#4CAF50"
								radius: 10
							}
							font.bold: true
						}
					}
					
					Item {		
						Layout.fillWidth: true
						Layout.fillHeight: true  // Make it resizable
						visible: loopToGo.properties["trackName2"] != "0"

						// Rectangle around loop button to indicate looper state
						Rectangle{
							width: loopButton2.width + 8
							height: loopButton2.height + 8
											
							anchors.centerIn: parent
									
							color: ((loopToGo.properties["loopColorAtPlayHead2"] != undefined) && 
							(loopToGo.properties["loopColorAtPlayHead2"] != "0"))? loopToGo.properties["loopColorAtPlayHead2"] : "black"	

							radius: 15			           
						}
							
						// Loop Button 
						LtgButton {
							text: (loopToGo.properties["trackName2"] != "0" && loopToGo.properties["trackName2"] !== undefined) ? 
								loopToGo.properties["trackName2"] : ""
							id: loopButton2
							

							ltgType: "loadScript"
							ltgAction: "LoopToGo/LooperEmulations/dtOne.ltgs"
							ltgParameters: "2"
							ltgArmEnabled: true // This buttons supports audio arming action
							ltgArmScript: "LoopToGo/audioTrigger.ltgs"

							
							anchors.centerIn: parent

														
							width: mainRectangle.width * 0.17

							height: mainRectangle.height * 0.2

							font.pixelSize: mainRectangle.width * 0.03
							background: Rectangle {
								color: parent.pressed ? "#388E3C" : "#4CAF50"
								radius: 10
							}
							font.bold: true
						}
					}
					
					Item {		
						Layout.fillWidth: true
						Layout.fillHeight: true  // Make it resizable
						visible: loopToGo.properties["trackName3"] != "0"


						// Rectang;le around loop button to indicate looper state
						Rectangle{
							width: loopButton3.width + 8
							height: loopButton3.height + 8
											
							anchors.centerIn: parent

							color: (loopToGo.properties["loopColorAtPlayHead3"] != undefined && loopToGo.properties["loopColorAtPlayHead3"] != "0") ? loopToGo.properties["loopColorAtPlayHead3"] : "black"	

							radius: 15			           
						}
							
						// Loop Button 
						LtgButton {
							text: (loopToGo.properties["trackName3"] != "0" && loopToGo.properties["trackName3"] !== undefined) ? 
								loopToGo.properties["trackName3"] : ""
							id: loopButton3
							

							ltgType: "loadScript"
							ltgAction: "LoopToGo/LooperEmulations/dtOne.ltgs"
							ltgParameters: "3"
							ltgArmEnabled: true // This buttons supports audio arming action
							ltgArmScript: "LoopToGo/audioTrigger.ltgs"

							anchors.centerIn: parent

														
							width: mainRectangle.width * 0.17

							height: mainRectangle.height * 0.2

							font.pixelSize: mainRectangle.width * 0.03
							background: Rectangle {
								color: parent.pressed ? "#388E3C" : "#4CAF50"
								radius: 10
							}
							font.bold: true
						}
					}
					
					Item {		
						Layout.fillWidth: true
						Layout.fillHeight: true  // Make it resizable
						visible: loopToGo.properties["trackName4"] != "0"

						// Rectang;le around loop button to indicate looper state
						Rectangle{
							width: loopButton4.width + 8
							height: loopButton4.height + 8
											
							anchors.centerIn: parent
							
							color: ((loopToGo.properties["loopColorAtPlayHead4"] != undefined) &&
								(loopToGo.properties["loopColorAtPlayHead4"] != "0") ) ? loopToGo.properties["loopColorAtPlayHead4"] : "black"	

							radius: 15			           
						}
							
						// Loop Button 
						LtgButton {
							text: (loopToGo.properties["trackName4"] != "0" && loopToGo.properties["trackName4"] !== undefined) ? 
								loopToGo.properties["trackName4"] : ""
							id: loopButton4

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

														
							width: mainRectangle.width * 0.17

							height: mainRectangle.height * 0.2

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


		}
	}
}