import QtQuick 2.15
import QtQuick.Controls 2.15
import "../LtgWidgets"

Item {
    width: 500
    height: 400
	
	// Instruction text property
    property string instructionText: 
		"<h3>Jam Control</h3><p>  
		<p>This interface is to be used in Jam Mode withconcurrent record loops on different tracks
		<P>Tracks with record loop will display 4 buttons: Record, Overdub, Lock and Clear
		<p><b>Record button</b>: set the loop in record mode
		<p><b>Overdub button</b>: set the loop in overdub mode
		<p><b>Lock button</b>: temporary lock the loop. Click again to lock it permanently
		<p><b>Clear button</b>: clear the data if the loop is not locked
		<p><b>Start Jamming button</b>: Start to jam (selected track must have a record loop at the playhead). <br>Same as 'J' shortcut : clicking on this button while in jame mode will cycle through Record-Overdub-Lock
		<p><b>End Jamming button</b>: Stop the jam mode. Same as 'O' shortcut  
		<p>
		<p>Tip 1: Click on a loop name to select it without any other actions
		<br>Tip 2: Uncheck the Show/Hide check box for a track (mixing console) to hide a track
		<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("visibleTrackNameList", "string");
        loopToGo.registerProperty("visibleTrackNoList", "string");
        loopToGo.registerProperty("nbTracks", "int");
        loopToGo.registerProperty("selectedTrack", "string");
        loopToGo.registerProperty("trackColorList", "string");
        loopToGo.registerProperty("trackNameColorList", "string");
        loopToGo.registerProperty("trackHasRecordLoopList", "string");
        loopToGo.registerProperty("loopColorAtPlayHeadList", "string");
    }

    // Bind the lists dynamically
    property var visibleTrackNameList: loopToGo.properties["visibleTrackNameList"] ? loopToGo.properties["visibleTrackNameList"].split(";") : []
	property var visibleTrackNoList: loopToGo.properties["visibleTrackNoList"]
		? loopToGo.properties["visibleTrackNoList"]
			.split(";")
			.map(s => parseInt(s))
		: []    
	property var trackColorList: loopToGo.properties["trackColorList"] ? loopToGo.properties["trackColorList"].split(";") : []
    property var trackNameColorList: loopToGo.properties["trackNameColorList"] ? loopToGo.properties["trackNameColorList"].split(";") : []
	property var trackHasRecordLoopList: loopToGo.properties["trackHasRecordLoopList"]
		? loopToGo.properties["trackHasRecordLoopList"].split(";").map(s => s === "1")
		: []
	property var loopColorAtPlayHeadList: loopToGo.properties["loopColorAtPlayHeadList"] ? loopToGo.properties["loopColorAtPlayHeadList"].split(";") : []
		
	// Rectangle as the background
    Rectangle {
		id: mainRectangle
        width: parent.width
        height: parent.height
        color: "#353535"  // Dark background color
		
		// Title
		Text {
			id: titleText
			
			text: "Jam Control"			
			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*.03				
			font.pixelSize: mainRectangle.height*.05
            font.bold: true			
			
		}
				
		// Warning
		Text {
			id: warningText
			
			text: "This Song Has No Visible Track"			
			color: "#FFA000"			
			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*.4				
			font.pixelSize: mainRectangle.width*.05
            font.bold: true		

			visible: visibleTrackNameList.length > 0 ? false : true  // Hides text if no sections exist
					
		}
		
		// 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"
			
		}
		
		LtgButton {
			
			id: endJamming
			text: "End Jamming (O)"
			ltgType: "shortcut"
			ltgAction: "shortcut"
			ltgParameters: "O"		// Out of jamming mode
			
			width: parent.width*.25
			height: parent.height*.075
			
			anchors.right: parent.right
			anchors.rightMargin: mainRectangle.width * 0.05   // Left space (5%)
			anchors.bottom: parent.bottom
			anchors.bottomMargin: mainRectangle.height * 0.05   // Left space (5%)
			
			background: Rectangle {
				color: "#f46e16"
				radius: 4
			}
			
			font.pixelSize: mainRectangle.width * .025
		}
		
		LtgButton {
			text: "Start Jamming (J)"
			ltgType: "shortcut"
			ltgAction: "shortcut"
			ltgParameters: "J"		// Out of jamming mode
			
			width: parent.width*.25
			height: parent.height*.075
			
			anchors.right: endJamming.left
			anchors.rightMargin: mainRectangle.width * 0.05   // Left space (5%)
			anchors.bottom: parent.bottom
			anchors.bottomMargin: mainRectangle.height * 0.05   // Left space (5%)
			
			background: Rectangle {
				color: "#1a691a"
				radius: 4
			}
			
			font.pixelSize: mainRectangle.width * .025
		}

		Row {
			anchors.left: parent.left
			anchors.leftMargin: mainRectangle.width * 0.05   // Left space (5%)
			anchors.verticalCenter: parent.verticalCenter
			anchors.verticalCenterOffset: mainRectangle.height * -0.01

			Grid {
				id: buttonGrid
				rows: loopToGo.properties["nbTracks"]
				spacing: mainRectangle.width * 0.003

				Repeater {
					id: buttonRepeater
					model: visibleTrackNameList

					Item {
						id: thisRow
						property int rowIndex: index  // <--- Capture outer index here

						width: mainRectangle.width  // Room for text + buttons
						height: mainRectangle.height * 0.65 / visibleTrackNameList.length

						Row {
							anchors.fill: parent
							spacing: mainRectangle.width * 0.01
							anchors.verticalCenter: parent.verticalCenter
															
							LtgButton {
								text: visibleTrackNoList[index] + " - " + modelData
								height: thisRow.height * 0.9
								width: thisRow.width*.35
								//horizontalAlignment: Text.AlignHCenter
								font.pixelSize: mainRectangle.width * .025
								
								ltgType: "shortcut"
								ltgAction: "shortcutByID"
								ltgParameters: 7143 + visibleTrackNoList[index]
								
								anchors.verticalCenter: parent.verticalCenter  // This centers it vertically in the Row

								
								background: Rectangle {											
								// Slightly darken the base color when pressed
								color: parent.pressed
										? Qt.darker(trackColorList[visibleTrackNoList[index] - 1], 1.2)
										: trackColorList[visibleTrackNoList[index] - 1]		


									radius: 4
									border.color: "white"
									border.width: modelData === loopToGo.properties["selectedTrack"] ? 4 : 0
								}
								
								palette.buttonText: trackNameColorList[visibleTrackNoList[index] - 1]
							}
							
							// Space
							Item {
								width: mainRectangle.width * 0.015  // Adjust space as needed
								height: thisRow.height*.3
							}

							Item {
								width: thisRow.width*.510  // or .48, or sum of button widths
								height: thisRow.height*.93
								visible: trackHasRecordLoopList[visibleTrackNoList[thisRow.rowIndex] - 1]
								
								Rectangle {
									anchors.fill: parent
									radius: 6
									color: "transparent"
									border.color: loopColorAtPlayHeadList[visibleTrackNoList[thisRow.rowIndex] - 1]
									border.width: 4
								
									Row {
										
										anchors {
											top: parent.top
											left: parent.left
											right: parent.right
											bottom: parent.bottom
											margins: mainRectangle.width * 0.01  // Margin inside the border
										}
		
										spacing: mainRectangle.width * 0.01
									
										Repeater {
											model: [
												{ label: "Record",  color: "red",    ltgParameters: 17383 },   // 13287 for arm record, 17383 for immediate record
												{ label: "Overdub", color: "orange", ltgParameters: 19431 },	// 15335 for arm overdub, 19431 for immediate overdub
												{ label: "Lock",    color: "gray",   ltgParameters: 21479 },
												{ label: "Clear",   color: "blue", ltgParameters: 27623 }
											]

											delegate: LtgButton {
												text: modelData.label
												
												ltgType: "shortcut"
												ltgAction: "shortcutByID"
												ltgParameters: modelData.ltgParameters + visibleTrackNoList[thisRow.rowIndex]

												height: thisRow.height * 0.7
												width: thisRow.width * 0.115
												font.pixelSize: mainRectangle.width * 0.025
												
												anchors.verticalCenter: parent.verticalCenter  // This centers it vertically in the Row

												background: Rectangle {
													color: parent.pressed ?
														Qt.darker(modelData.color, 1.2) :
														modelData.color
													radius: 4
												}
											}
										}
									}	
								}	
							}
						}
					}
				}
			}
		}
	
	}
}
