import QtQuick 2.14
import QtQuick.Controls 2.14
import QtQuick.Layouts 1.14
import QtQuick.Window 2.14
import org.kde.kirigami 2.4 as Kirigami

Window {
    minimumWidth: topLayout.implicitWidth + (units.smallSpacing * 2)
    minimumHeight: topLayout.implicitHeight + (units.smallSpacing * 2)

    Item {
	anchors.fill: parent
	id: authDialog
	state: "rootAuth"
	states: [
	    State {
		name: "rootAuth"
		PropertyChanges { target: authText; text: "Authenticate as <b>root user</b>:" }
		PropertyChanges { target: userSelect; visible: false }
	    },
	    State {
		name: "adminAuth"
		PropertyChanges { target: authText; text: "Authenticate as <b>administrative user</b>:" }
		PropertyChanges { target: userSelect; visible: true}
	    },
	    State {
		name: "selfAuth"
		PropertyChanges { target: authText; text: "Authenticate as <b>John Doe</b>:" }
		PropertyChanges { target: userSelect; visible: false }
	    }
	]

	ColumnLayout {
	    id: topLayout
	    anchors.margins: units.smallSpacing
	    anchors.fill: parent

	    RowLayout {
                Layout.preferredWidth: buttonRow.implicitWidth
                id: headRow
		Kirigami.Icon {
                    id: icon
		    width: 64
		    height: 64
		    source: "drive-harddisk"

		    MouseArea {
			// For demonstration purposes only
			id: mouseArea
			anchors.fill: parent
			onClicked: {
			    if (authDialog.state == "rootAuth")
				authDialog.state = "adminAuth";
			    else if (authDialog.state == "adminAuth")
				authDialog.state = "selfAuth";
			    else if (authDialog.state == "selfAuth")
				authDialog.state = "rootAuth";
			    console.log("Dialog state: " + authDialog.state);
			}
		    }
		}
		Text {
		    Layout.fillWidth: true
		    font.pointSize: 12
		    wrapMode: Text.WordWrap
		    text: "Authentication is required to unmount a filesystem mounted by another user"
		}
	    }

	    Item { height: units.smallSpacing }

	    Text {
		id: authText
		// text: "Authentication as administrative user:"
		wrapMode: Text.WordWrap
		clip: false
		Layout.fillWidth: true
	    }

	    RowLayout {
		id: userSelect
		Layout.fillWidth: true
		Text {
		    text: "User:"
		}
		ComboBox {
		    editable: false
		    Layout.fillWidth: true
		    model: ListModel {
			id: model
			ListElement { text: "Jane" }
			ListElement { text: "Bob" }
		    }
		}
	    }
	    TextField {
		Layout.fillWidth: true
		placeholderText: "Password"
		echoMode: TextInput.Password
	    }

	    Item { height: units.smallSpacing }

	    RowLayout {
		id: buttonRow
                Button {
                    text: "Details"
                    icon.name: "documentinfo"
                    onClicked: { details.visible = !details.visible }
                }
                Item { Layout.fillWidth: true }

		Button {
		    text: "Cancel"
		}
		Button {
		    text: "Authenticate"
		}
	    }


	    Item {
                visible: details.visible
                height: units.smallSpacing }

            GridLayout {
                Layout.preferredWidth: buttonRow.implicitWidth
                Layout.minimumWidth: 0
                Layout.fillWidth: true
                id: details
                visible: false
                columns: 2
                Text {
                    Layout.alignment: Qt.AlignRight | Qt.AlignTop
                    text: "<b>Action:</b>" }
                Text {
		    Layout.fillWidth: true
                    text: "Unmount a device mounted by another user"
                    wrapMode: Text.Wrap }
                Text {
                    Layout.alignment: Qt.AlignRight | Qt.AlignTop
                    text: "<b>ID:</b>" }
                Text {
		    Layout.fillWidth: true
                    text: "org.freedesktop.udisks2.filesystem-unmount-others"
                    wrapMode: Text.Wrap }
                Text {
                    Layout.alignment: Qt.AlignRight | Qt.AlignTop
                    text: "<b>Vendor:</b>" }
                Text {
		    Layout.fillWidth: true
                    text: "The Udisks project"
                    wrapMode: Text.Wrap }
            }

	    Item {
		Layout.fillHeight: true
	    }

	}
    }
}