import QtQuick 2.15
import QtQuick.Controls 2.15

import "../LtgWidgets"

Item {
    width: 250
    height: 350
	
    // Instruction text property
    property string instructionText: 
		"<h3>How to use this 2 button looper emulator</h3><p>  
		<p>Create at least 1 track with input and output(s) 
		<p>Press the Loop button to start recording. 
		<p>Press again to stop recording and loop.
		<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...).
		<br>
		<p><b>Note:</b> It is possible to use this looper with many tracks. Use the mouse to select a new track"

    // 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");		
		
		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

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

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

		// Rectang;le around loop button to indiqcate looper state
		Rectangle{
			width: loopButton.width*1.1
			height: loopButton.height*1.1
			
			anchors.horizontalCenter: loopButton.horizontalCenter
            anchors.verticalCenter: loopButton.verticalCenter
			
            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			           
		}
		
		// Title
		Text {
			id: titleText
			
			text: "Simple looper\n2b"			
			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*.14			
			font.pixelSize: mainRectangle.height*.06
            font.bold: true			
			
		}
		
        // 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
			ltgShowArmDialog: "left" // or "" for not showing or "right", but anything else than "left" and "" will default to "right" 
			ltgArmScript: "LoopToGo/audioTrigger.ltgs"
			
			anchors.horizontalCenter: parent.horizontalCenter
			anchors.top: parent.top
			anchors.topMargin: parent.height*.33
			
			width: parent.width * 0.4
			height: parent.height * 0.25

			font.pixelSize: 18
			background: Rectangle {
				color: parent.pressed ? "#388E3C" : "#4CAF50"
				radius: 10
			}
			font.bold: true
		}
		
        // Reset Button (Smaller and Centered)
		LtgButton {
			text: "Reset"
			
			ltgType: "loadScript"
			ltgAction: "LoopToGo/LooperEmulations/resetSong.ltgs"
			ltgParameters: ""
			
			anchors.horizontalCenter: parent.horizontalCenter
			anchors.top: loopButton.bottom
			anchors.topMargin: parent.height*.12
			
			width: parent.width * 0.35
			height: parent.height * 0.15

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