import QtQuick
import QtQuick.Controls.Basic
import QtQuick.Layouts
import Linphone
import 'qrc:/qt/qml/Linphone/view/Control/Tool/Helper/utils.js' as Utils

RowLayout {
	id: mainItem
	property string titleText
	property string subTitleText
	property string propertyName
	property var propertyOwner
	property var propertyOwnerGui
	property alias entries: comboBox.model
	property alias model: comboBox.model
	property alias textRole: comboBox.textRole
	property alias flagRole: comboBox.flagRole
	property alias currentIndex: comboBox.currentIndex
	property alias currentValue: comboBox.currentValue
	property alias listView: comboBox.listView
	spacing: Utils.getSizeWithScreenRatio(20)

	ColumnLayout {
		Layout.minimumHeight: Utils.getSizeWithScreenRatio(32)
		Layout.fillWidth: true
		spacing: Utils.getSizeWithScreenRatio(4)
		visible: titleText.length > 0
		Text {
			text: titleText
			font: Typography.p2l
			wrapMode: Text.WordWrap
			color: DefaultStyle.main2_600
			Layout.fillWidth: true
		}
		Text {
			text: subTitleText
			font: Typography.p1
			wrapMode: Text.WordWrap
			visible: subTitleText.length > 0
			color: DefaultStyle.main2_600
			Layout.fillWidth: true
		}
	}

	ComboBox {
		id: comboBox
		Layout.alignment: titleText.length > 0 ? (Qt.AlignRight | Qt.AlignVCenter) : Qt.AlignLeft
		Layout.preferredHeight: Utils.getSizeWithScreenRatio(49)
		Layout.preferredWidth: titleText.length > 0 ? Utils.getSizeWithScreenRatio(200) : undefined
		Layout.fillWidth: titleText.length === 0
		oneLine: true
		textRole: "text"
		currentIndex: Utils.findIndex(model, function (entry) {
			var currentVal = propertyOwnerGui
				? propertyOwnerGui.core[mainItem.propertyName]
				: propertyOwner[mainItem.propertyName]
			// Handle different entry types
			if (typeof entry === 'string') {
				// QStringList (video devices): compare strings directly
				return entry === currentVal
			} else if (entry.id !== undefined) {
				// Audio devices: compare by id
				return currentVal && entry.id === currentVal.id
			} else if (entry.value !== undefined) {
				// Simple entries (language, color): compare by value
				return entry.value === currentVal
			}
			return false
		})
		onCurrentIndexChanged: {
			if (currentIndex < 0 || !model) return
			var entry = model[currentIndex]
			if (!entry) return
			var storedVal = propertyOwnerGui
				? propertyOwnerGui.core[mainItem.propertyName]
				: propertyOwner[mainItem.propertyName]
			// Determine if values differ based on entry type
			if (typeof entry === 'string') {
				// QStringList: compare strings directly
				binding.when = entry !== storedVal
			} else if (entry.id !== undefined) {
				// Audio devices: compare by id
				binding.when = !storedVal || entry.id !== storedVal.id
			} else if (entry.value !== undefined) {
				// Simple entries: compare by value
				binding.when = entry.value !== storedVal
			}
		}
		Binding {
			id: binding
			target: propertyOwnerGui ? propertyOwnerGui.core : propertyOwner
			property: mainItem.propertyName
			value: {
				if (comboBox.currentIndex < 0 || !comboBox.model) return undefined
				var entry = comboBox.model[comboBox.currentIndex]
				if (!entry) return undefined
				// Return based on entry type
				if (typeof entry === 'string') return entry  // QStringList
				if (entry.id !== undefined) return entry      // Audio devices
				if (entry.value !== undefined) return entry.value  // Simple entries
				return entry
			}
			when: false
		}
	}
}