import QtQuick 2.0
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.0
import QtQuick.Controls.Material 2.0

ItemDelegate {
    id: control

    implicitHeight: 50

    Rectangle {
        anchors {
            top: parent.top
            left: parent.left
            right: parent.right
            topMargin: - control.ListView.view.spacing * 0.5
        }

        color: "lightgrey"
        height: 1
        visible: model.index !== 0
    }

    text: model.text

    contentItem: RowLayout {
        spacing: 5

        Text {
            Layout.fillWidth: true

            elide: Text.ElideRight

            opacity: model.active ? 1:0.5

            color: control.Material.foreground

            text: control.text

            Behavior on opacity {
                NumberAnimation {}
            }
        }

        Rectangle {
            Layout.fillHeight: true
            Layout.preferredWidth: model.scroll ? parent.width * 0.15 : 0

            visible: model.scroll

            radius: height * 0.1

            color: model.active ? Material.accent:"lightgrey"

            Behavior on color {
                ColorAnimation {}
            }

            Text {
                anchors.centerIn: parent

                width: parent.width * 0.9
                height: parent.height * 0.8

                font.pixelSize: height
                fontSizeMode: Text.Fit
                minimumPixelSize: 1
                verticalAlignment: Text.AlignVCenter
                horizontalAlignment: Text.AlignHCenter

                color: "white"

                text: model.scroll ? qsTr("scrolling"):qsTr("false")
            }
        }

        Rectangle {
            Layout.preferredHeight: parent.height
            Layout.preferredWidth: parent.width * 0.15

            radius: height * 0.1

            color: model.active ? "green" : "red"

            Behavior on color {
                ColorAnimation {}
            }

            Text {
                id: activeText
                anchors.centerIn: parent

                width: parent.width * 0.8
                height: parent.height * 0.8

                font.pixelSize: height
                fontSizeMode: Text.Fit
                minimumPixelSize: 1
                verticalAlignment: Text.AlignVCenter
                horizontalAlignment: Text.AlignHCenter

                color: "white"
                text: model.active ? qsTr("  active  "):qsTr("inactive")
            }

            Button {
                anchors.centerIn: parent
                width: parent.width
                height: parent.height * 1.4
                flat: true

                onClicked: {
                    model.active = !model.active
                }
            }
        }
    }
}