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

Item {
    width: 800
    height: 400
	
	// Instruction text property
    property string instructionText: 
		"<h3>Manage Section Interface</h3><p>  
		<p>This interface is to be used with songs that have sections. 
		Sections are created through the Chords/Lyrics Editor or with Section Markers"

    // 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("sectionNameList", "string");
        loopToGo.registerProperty("sectionStartList", "string");
        loopToGo.registerProperty("sectionEndList", "string");
        loopToGo.registerProperty("currentSection", "int");
        loopToGo.registerProperty("nextSection", "int");
        loopToGo.registerProperty("songName", "string");
    }

    // Bind the lists dynamically
    property var sectionNameList: loopToGo.properties["sectionNameList"] ? loopToGo.properties["sectionNameList"].split(";") : []
    property var sectionStartList: loopToGo.properties["sectionStartList"] ? loopToGo.properties["sectionStartList"].split(";") : []
    property var sectionEndList: loopToGo.properties["sectionEndList"] ? loopToGo.properties["sectionEndList"].split(";") : []

// Rectangle as the background
    Rectangle {
		id: mainRectangle
        width: parent.width
        height: parent.height
        color: "#353535"  // Dark background color
		
		// Title
		Text {
			id: titleText
			
			text: "Section Manager"			
			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			
			
		}
		// Song name
		Text {
			id: songNameText
			
			text: (loopToGo.properties["songName"]) ? loopToGo.properties["songName"] : "New project"
			color: "#1c7eff"			
			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*.12				
			font.pixelSize: mainRectangle.height*.08
            font.bold: true			
			
		}
		
		// Warning
		Text {
			id: warningText
			
			text: "This Song Has No Section"			
			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.height*.08
            font.bold: true		

			visible: sectionNameList.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"
			
		}

		Column {
			anchors.centerIn: parent
		    anchors.verticalCenterOffset: mainRectangle.height*.05  // Move the column  down

			Grid {
				id: buttonGrid
				columns: 4
				spacing: mainRectangle.width*.015

				Repeater {
					id: buttonRepeater
					model: sectionNameList  // Directly use the bound sectionNameList

					LtgButton {
						text: modelData // Set button text to the section name
						width: mainRectangle.width*.20
						height: Math.min(mainRectangle.height * 1.8 / sectionNameList.length, mainRectangle.height * 0.18)
						
						property int buttonIndex: index  // Store the index in the button

						
						font.pixelSize: mainRectangle.width*.03

						
						background: Rectangle {
							color: parent.pressed 
								   ? "#777777"  // Pressed color always takes priority
								   : (parseInt(loopToGo.properties["currentSection"]) === buttonIndex + 1)
									 ? "#4CAF50"
									 : (parseInt(loopToGo.properties["nextSection"]) === buttonIndex + 1)
									   ? "#FFA000"
									   : "#607D8B"
							radius: 10
						}

						// Overide the ToolTip to the LtgButton
						baseToolTip: "Start: " + sectionStartList[index] + "\nEnd: " + sectionEndList[index];
						
						ltgType: "shortcut"
						ltgAction: "shortcutByID"
						ltgParameters: (23528 + index).toString()
							
						//onClicked: {
						//	// Execute the signal when button is clicked (custom behavior can be added here)
						//	ltgExecute("shortcut", "shortcutByID", (23528 + index).toString());
						//}
					}
				}
			}
		}
	}
}
