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


import "../LtgWidgets"

Item {
    width: 500
    height: 200
	

	
    // Instruction text property
    property string instructionText: 
		"<h3>How to use this 3 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 wil lnow 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");
		
		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 - 3b"			
			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*.11	
			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"			
		}

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

													
			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/dtOne.ltgs"
					ltgParameters: "-1" // -1 : selected track
					ltgArmEnabled: true // This buttons supports audio arming action
					ltgArmScript: "LoopToGo/audioTrigger.ltgs"

					
					anchors.centerIn: parent

												
					width: mainRectangle.width * 0.25

					height: mainRectangle.height * 0.35

					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.25
					height: mainRectangle.height * 0.35

					font.pixelSize: width*.1
					background: Rectangle {
						color: parent.pressed ? "#104892" : "#1a74ea"
						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.25
					height: mainRectangle.height * 0.35

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