pragma ComponentBehavior: Bound

import QtQuick
import QtQuick.Controls.impl
import QtQuick.Controls
import QtQuick.Templates as T

T.ComboBox {
    id: control

    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
                            implicitContentWidth + leftPadding + rightPadding)
    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
                             implicitContentHeight + topPadding + bottomPadding,
                             implicitIndicatorHeight + topPadding + bottomPadding)

    leftPadding: padding + (!control.mirrored || !indicator || !indicator.visible ? 0 : indicator.width + spacing)
    rightPadding: padding + (control.mirrored || !indicator || !indicator.visible ? 0 : indicator.width + spacing)

    delegate: ItemDelegate {
        required property var model
        required property int index

        width: ListView.view.width
        text: model[control.textRole]
        // palette.text: control.palette.text
        // palette.highlightedText: control.palette.highlightedText
        font.weight: control.currentIndex === index ? Font.DemiBold : Font.Normal
        highlighted: control.highlightedIndex === index
        hoverEnabled: control.hoverEnabled
    }

    indicator: ColorImage {
        x: control.mirrored ? control.padding : control.width - width - control.padding
        y: control.topPadding + (control.availableHeight - height) / 2

        source: "qrc:/images/ChevronDown.svg"
        opacity: enabled ? 1 : 0.3
    }

    contentItem: T.TextField {
        // leftPadding: !control.mirrored ? 12 : control.editable && activeFocus ? 3 : 1
        // rightPadding: control.mirrored ? 12 : control.editable && activeFocus ? 3 : 1
        // topPadding: 6 - control.padding
        // bottomPadding: 6 - control.padding
        implicitHeight: Typography.body.pixelSize + bottomPadding + topPadding
        text: control.editable ? control.editText : control.displayText
        padding: Dimensions.m
        enabled: control.editable
        autoScroll: control.editable
        readOnly: control.down
        inputMethodHints: control.inputMethodHints
        validator: control.validator
        selectByMouse: control.selectTextByMouse

        color: Colors.foreground
        // selectionColor: control.palette.highlight
        // selectedTextColor: control.palette.highlightedText
        verticalAlignment: Text.AlignVCenter

        background: Rectangle {
            visible: control.enabled && control.editable && !control.flat
            border.width: parent && parent.activeFocus ? 2 : 1
            border.color: Colors.interactive
            radius: Dimensions.radius
            color: Colors.mantle

        }
    }

    background: Rectangle {
        implicitWidth: 140
        implicitHeight: 40
        radius: Dimensions.radius
        color: Colors.mantle
        border.color: Colors.interactive
        border.width: 1
        visible: !control.flat || control.down
    }

    popup: T.Popup {
        y: control.height
        width: control.width
        height: Math.min(contentItem.implicitHeight, control.Window.height - topMargin - bottomMargin)
        topMargin: 6
        bottomMargin: 6
        palette: control.palette

        contentItem: ListView {
            clip: true
            implicitHeight: contentHeight
            model: control.delegateModel
            currentIndex: control.highlightedIndex
            highlightMoveDuration: 0

            Rectangle {
                z: 10
                width: parent.width
                height: parent.height
                color: "transparent"
                border.color: control.palette.mid
            }

            T.ScrollIndicator.vertical: ScrollIndicator { }
        }

        background: Rectangle {
            color: control.palette.window
        }

    }
}


// import QtQuick
// import QtQuick.Templates as T
// import QtQuick.Controls
// import QtQuick.Controls.impl

// T.ComboBox {
//     id: control

//     font: Typography.body
//     implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
//                              implicitContentHeight + topPadding + bottomPadding,
//                              implicitIndicatorHeight + topPadding + bottomPadding)


//     contentItem: T.TextField {
//         id: test
//         autoScroll: control.editable
//         color: Colors.foreground
//         enabled: control.editable

//         font: Typography.body
//         implicitHeight: Typography.body.pixelSize + topPadding + bottomPadding
//         inputMethodHints: control.inputMethodHints
//         padding: Dimensions.m
//         readOnly: control.down
//         selectByMouse: control.selectTextByMouse
//         text: control.editable ? control.editText : control.displayText
//         validator: control.validator
//         width: control.width - indicator.width
//         verticalAlignment: Text.AlignVCenter
//     }
//     background: Rectangle {
//         border.color: Colors.interactive
//         border.width: 1
//         color: Colors.mantle
//         // height: parent.height
//         radius: Dimensions.radius
//         width: parent.width
//     }
//     // delegate: MenuItem {
//     //     id: menuItem

//     //     required property int index
//     //     required property var model

//     //     highlighted: control.highlightedIndex === index
//     //     hoverEnabled: control.hoverEnabled
//     //     text: model[control.textRole]
//     //     width: control.width

//     //     background: Rectangle {
//     //         color: menuItem.down || menuItem.highlighted ? Colors.primary : "transparent"
//     //         height: menuItem.height
//     //         width: menuItem.width
//     //     }
//     // }
//     delegate: ItemDelegate {
//         required property var model
//         required property int index

//         width: ListView.view.width
//         text: model[control.textRole]
//         // palette.text: control.palette.text
//         // palette.highlightedText: control.palette.highlightedText
//         // font.weight: control.currentIndex === index ? Font.DemiBold : Font.Normal
//         highlighted: control.highlightedIndex === index
//         hoverEnabled: control.hoverEnabled
//     }
//     indicator: Rectangle {
//         id: indicator

//         border.color: Colors.interactive
//         bottomRightRadius: Dimensions.radius
//         color: Colors.primary
//         height: control.height
//         topRightRadius: Dimensions.radius
//         width: 20 + Dimensions.s * 2
//         x: control.width - width
//         y: 0
//         z: 2

//         IconLabel {
//             anchors.fill: parent
//             bottomPadding: Dimensions.s
//             icon.color: Colors.foreground
//             icon.source: "qrc:/images/ChevronDown.svg"
//             leftPadding: Dimensions.s
//             rightPadding: Dimensions.s
//             topPadding: Dimensions.s
//         }
//         MouseArea {
//             anchors.fill: parent
//             cursorShape: Qt.PointingHandCursor

//             onPressed: () => {
//                 control.popup.visible = true;
//                 control.popup.forceActiveFocus()
//             }
//         }
//     }
//     popup: T.Popup {
//         bottomMargin: 6
//         height: Math.min(contentItem.implicitHeight + 2, control.Window.height - topMargin - bottomMargin)
//         padding: 1
//         topMargin: 6
//         width: control.width
//         y: control.height

//         background: Rectangle {
//             border.color: Colors.interactive
//             color: Colors.mantle
//             radius: Dimensions.radius
//         }
//         contentItem: ListView {
//             clip: true
//             currentIndex: control.highlightedIndex
//             implicitHeight: contentHeight
//             model: control.popup.visible ? control.delegateModel : null

//             T.ScrollBar.vertical: ScrollBar {
//             }
//             highlight: Rectangle {
//                 color: Colors.primary
//                 opacity: Colors.highlightOpacity
//             }
//         }
//     }
//     Component.onCompleted:
//     {
//         console.log(control.implicitContentHeight)
//     }
// }