import QtQuick 6.5
import QtQuick.Layouts 6.5
import QtQuick.Controls.Fusion 6.5
import QtQuick.Window 6.0


import "../LtgWidgets"

Item {
	id: mainItem
    width: 190
    height: 550
	
	// List of switches in the image in image coordinates
	property var buttonInfo: [
        { label: "Add Loops To\nSelected Track", color: "#6C5100", type: "loadScript", action: "LoopToGo/addLoopsForSelectedTrack.ltgs", parameters: "" },
        { label: "Adjust To\nSection", color: "#0D3A75", type: "loadScript", action: "LoopToGo/adjustSelectedLoopToSection.ltgs", parameters: ""},
        { label: "Set Loop Start to\nSelected Section", color: "#80370B", type: "loadScript", action: "LoopToGo/setLoopStartToCurrentSection.ltgs", parameters: ""},
        { label: "Set Loop End to\nSelected Section", color: "#662C09", type: "loadScript", action: "LoopToGo/setLoopEndToCurrentSection.ltgs", parameters: ""  },
        { label: "Check Chords", color: "#422852", type: "loadScript", action: "LoopToGo/analysePlayLoopChords.ltgs", parameters: "0" },
        { label: "Set PlayHead To\nChords Cursor", color: "#206020", type: "shortcut", action: "shortcutByID", parameters: "128" },
        { label: "Set Cursor\nTo PlayHead", color: "#1A4D1A", type: "shortcut", action: "shortcutByID", parameters: "134" }
    ]
	
	// Instruction text property
	property string instructionText: 
		"<h3>Tool Panel for Song Setup</h3>
		<p>A tool panel providing access to various scripts that simplify the process of building a song.</p>
		<p>The panel can be resized to display the buttons vertically, horizontally, or in a square layout.</p>
		<h5>" + buttonInfo[0].label + "</h5> <p>Record and Play loops will be added for the selected track based on the Section's name</p>
		<h5>" + buttonInfo[1].label + "</h5> <p>The selected loop(s) start and end will be adjusted to fit the corresponding section</p>
		<h5>" + buttonInfo[2].label + "</h5> <p>The selected loop start will be adjusted to the selected section marker</p>
		<h5>" + buttonInfo[3].label + "</h5> <p>The selected loop end will be adjusted to the selected section marker</p>
		<h5>" + buttonInfo[4].label + "</h5> <p>The chords of the play loops will be check for coherence. A report will be displayed in the log console</p>
		<h5>" + buttonInfo[5].label + "</h5> <p>The play head will be set to correspond to the current cursor position in the Chord editor</p>
		<h5>" + buttonInfo[6].label + "</h5> <p>The cursor in the Chord editor will be set to correspond to the current playhead position</p>"

	
	// Signal to LoopToGo
    signal ltgExecute(ltgType: string, ltgAction: string, ltgParameters: string)
	
	
	
	Rectangle {
		id: mainRectangle
        width: parent.width
        height: parent.height
        color: "#353535"  // Dark background color
			
		Flow {
			id: buttonFlow
									
			flow: width > height ? Flow.LeftToRight : Flow.TopToBottom

			property int buttonWidth: (mainItem.width < 120) ? mainItem.width*.75 : 120
			property int buttonHeight: (mainItem.width < 120) ? buttonWidth/4 : buttonWidth/2.5
			property int columnCount: Math.min(Math.floor(parent.width / (buttonWidth + spacing)), mainItem.buttonInfo.length)
			property int columnWidth: columnCount * buttonWidth + (columnCount - 1) * spacing
			property int horMargin: (parent.width - columnWidth) / 2
			
			property int rowCount: Math.ceil(mainItem.buttonInfo.length / columnCount)
			property int rowWidth: rowCount * buttonHeight + (rowCount - 1) * spacing
			property int verMargin: (parent.height - rowWidth) / 2
			

			anchors {
				fill: parent
				leftMargin: horMargin
				rightMargin: horMargin
				left: parent.left
				topMargin: verMargin
				bottomMargin: verMargin
				top: parent.top
						
			}
		
			spacing: buttonWidth/12


			// Adjusting the size of each button based on available space
			Repeater {
				model: mainItem.buttonInfo
				LtgButton {
					width: buttonFlow.buttonWidth  
					height: buttonFlow.buttonHeight  
					
					ltgType: modelData.type
					ltgAction: modelData.action
					ltgParameters: modelData.parameters
					
					background: Rectangle {
						//color: parent.pressed ? "#388E3C" : modelData.color
						color: parent.pressed ? modelData.color : Qt.lighter(modelData.color, 1.7)
						radius: 10
					}
					
					Text {
						anchors.centerIn: parent
						text: modelData.label	
						color: "#DDDDDD"				
						font.pixelSize: (mainItem.width < 120) ? 5 : 13
						//font.bold: true
					}
					
					
				}
			}
		}
	
	}

    onWidthChanged: {									
		buttonFlow.flow = width > height ? Flow.LeftToRight : Flow.TopToBottom
		//console.log("Width changed ")
		//console.log("columnCount " + buttonFlow.columnCount)
		//console.log("columnWidth " + buttonFlow.columnWidth)
		//console.log("horMargin " + buttonFlow.horMargin)
		//console.log("rowCount " + buttonFlow.rowCount)
		//console.log("rowWidth " + buttonFlow.rowWidth)
		//console.log("verMargin " + buttonFlow.verMargin)
		//console.log("mainItem.buttonInfo.length " + mainItem.buttonInfo.length)
	}
    onHeightChanged: {
		buttonFlow.flow = width > height ? Flow.LeftToRight : Flow.TopToBottom
		//console.log("Height changed")
		//console.log("columnCount " + buttonFlow.columnCount)
		//console.log("rowWidth " + buttonFlow.rowWidth)
		//console.log("horMargin " + buttonFlow.horMargin)
	}
	
	// Small Button with Image (Bottom-left corner)
	LtgLogoButton {
		width: 20
		height: width			
	}

	// Help Button (Top-right corner)
	LtgHelpButton {
		
		width: 20
		height: width
		
		// Show instructions when clicked
		onClicked: {
			messageWindow.show();
		}
	}

	// Message dialog to display instructions		
	LtgMessageWindow {
		id: messageWindow
		title: "Instructions"
		
	}
	
	Button {
        text: "I"
        anchors.left: parent.left
        anchors.top: parent.top
        anchors.margins: 10
		width: 20
		height: 20
		
		flat: true // To disable the change of button color when hovering the mouse over the button
		
		background: Rectangle {
            color: "#3498db"  // Custom blue color
            radius: 5  // Small rounded corners
        }
		
        onClicked: {
            var tempWidth = mainItem.width;
            var tempHeight = mainItem.height;
						
			// Update the QuickView size to match the new size of mainItem
			if (quickView != undefined)
			{
				// we inverse the height and the width
				var ratio = (buttonFlow.buttonWidth + buttonFlow.spacing)/(buttonFlow.buttonHeight + buttonFlow.spacing);
				quickView.setWidth(tempHeight*ratio);
                quickView.setHeight(tempWidth/ratio);
			}			
        }
    }
}
