import QtQuick 2.0
import QtQuick.Controls 2.9
import QtQuick.Controls.Material 2.0

ItemDelegate {
    id: control

    property string value: ""

    onClicked: {
        colorPicker.value = value
        textEditDialog.open()
    }

    Rectangle {
        anchors {
            right: nextPageIconText.left
            verticalCenter: parent.verticalCenter
            rightMargin: control.padding
        }

        width: parent.width * 0.15
        height: parent.height * 0.6
        radius: height *  0.1

        color: control.value === "" ? "transparent":control.value

        border.width: 2
        border.color: control.value === "" ? "lightgrey":control.value


        Text {
            anchors.fill: parent
            anchors.margins: parent.height * 0.1

            font.pixelSize: height * 0.5
            fontSizeMode: Text.Fit
            verticalAlignment: Text.AlignVCenter
            horizontalAlignment: Text.AlignHCenter

            color: colorPicker.isDarkColor && control.value !== "" ? "white":"black"

            text: value === "" ? "Not set": value
        }
    }

    Text {
        id: nextPageIconText

        anchors {
            right: parent.right
            verticalCenter: parent.verticalCenter
            rightMargin: control.padding
        }

        font.pixelSize: parent.height * 0.5

        verticalAlignment: Text.AlignVCenter

        text: ">"
    }

    Dialog {
        id: textEditDialog
        parent: Overlay.overlay

        x: (parent.width - width) / 2
        y: (parent.height - height) / 2

        width: parent.width * 0.9

        Material.theme: control.Material.theme
        Material.accent: control.Material.accent
        modal: true

        title: control.text

        standardButtons: Dialog.Ok | Dialog.Cancel

        contentItem: ColorPicker {
            id: colorPicker
            value: control.value
        }

        onAccepted: {
            control.value = colorPicker.value
        }
    }
}