import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.5
import QtQuick.Layouts 1.12


import QtQuick.Controls 2.12
import QtQuick.Controls.impl 2.12
import QtQuick.Controls.Fusion 2.12
import QtQuick.Controls.Fusion.impl 2.12

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")
    ListModel {
                    id: model
                    ListElement { text: "" }
                    ListElement { text: "Banana" }
                    ListElement { text: "Apple" }
                    ListElement { text: "Coconut" }
                }

    ColumnLayout {

        CheckBox {
            id: checkEdit_
            text: "Toggle edit"
            checked: true
        }

        Label { text: "Normal ComboBox with placeholderText on contentItem" }

        ComboBox {
            id: comboCategory_
            editable: checkEdit_.checked
            currentIndex: -1
            model: model

            Component.onCompleted: {
                console.log("aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa")
                console.log( "ContentItem is    : " + comboCategory_.contentItem )
                console.log( "placeholderText is: " + comboCategory_.contentItem.placeholderText )
                comboCategory_.contentItem.placeholderText      = "<category>"
                comboCategory_.contentItem.selectByMouse        = true
                console.log( "placeholderText is: " + comboCategory_.contentItem.placeholderText )
                console.log("bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb")
            }
        }

        Label { text: "ComboBox using contentItem from Fusion Style with placeholderText" }

        ComboBox {
            id: control
            editable: checkEdit_.checked
            currentIndex: -1
            model: model

            contentItem: TextField {
                placeholderText: "<category>" /* <<== HERE */

                topPadding: 4
                leftPadding: 4 - control.padding
                rightPadding: 4 - control.padding
                bottomPadding: 4

                text: control.editable ? control.editText : control.displayText

                enabled: control.editable
                autoScroll: control.editable
                readOnly: control.down
                inputMethodHints: control.inputMethodHints
                validator: control.validator

                font: control.font
                color: control.editable ? control.palette.text : control.palette.buttonText
                selectionColor: control.palette.highlight
                selectedTextColor: control.palette.highlightedText
                verticalAlignment: Text.AlignVCenter

                background: PaddedRectangle {
                    clip: true
                    radius: 2
                    padding: 1
                    leftPadding: control.mirrored ? -2 : padding
                    rightPadding: !control.mirrored ? -2 : padding
                    color: control.palette.base
                    visible: control.editable && !control.flat

                    Rectangle {
                        x: parent.width - width
                        y: 1
                        width: 1
                        height: parent.height - 2
                        color: Fusion.buttonOutline(control.palette, control.activeFocus, control.enabled)
                    }

                    Rectangle {
                        x: 1
                        y: 1
                        width: parent.width - 3
                        height: 1
                        color: Fusion.topShadow
                    }
                }

                Rectangle {
                    x: 1 - control.leftPadding
                    y: 1
                    width: control.width - 2
                    height: control.height - 2
                    color: "transparent"
                    border.color: Color.transparent(Fusion.highlightedOutline(control.palette), 40 / 255)
                    visible: control.activeFocus
                    radius: 1.7
                }
            }

        }
    }

}