import QtQuick 2.12
import QtQuick.Controls 2.12 as Controls
import QtQuick.Layouts 1.12

import Palette 1.0

Controls.CheckBox {
    id: control

    implicitHeight: 128
    padding: 12
    tristate: true
    checkState: Qt.Unchecked

    property string firstStateDescription
    property string secondStateDescription

    indicator: Item {
        anchors.fill: control
        anchors.margins: control.padding

        RowLayout {
            anchors.fill: parent
            spacing: 0

            Controls.Label {
                id: firstLabel

                text: control.firstStateDescription
                horizontalAlignment: Text.AlignHCenter
                verticalAlignment: Text.AlignVCenter

                font.family: "Roboto"
                font.pixelSize: 72
                font.weight: Font.Bold

                color: control.checkState === Qt.PartiallyChecked ? Palette.alternativeLabelTextColor : Palette.labelTextColor
                Layout.preferredWidth: (parent.width -parent.spacing) / 2
            }

            Controls.Label {
                id: secondLabel

                text: control.secondStateDescription
                horizontalAlignment: Text.AlignHCenter
                verticalAlignment: Text.AlignVCenter

                font.family: "Roboto"
                font.pixelSize: 72
                font.weight: Font.Bold

                color: control.checkState === Qt.Checked ? Palette.alternativeLabelTextColor : Palette.labelTextColor
                Layout.preferredWidth: (parent.width -parent.spacing) / 2
            }
        }

        Rectangle {
            color: Palette.switchActiveBackgroundColor
            radius: 24
            visible: control.checkState !== Qt.Unchecked

            width: control.checkState === Qt.Checked ? secondLabel.width : firstLabel.width
            height: parent.height
            x: control.checkState === Qt.Checked ? secondLabel.x : firstLabel.x
            z: -1
        }
    }

    contentItem: Item {
    }

    background: Rectangle {
        color: Palette.switchBackgroundColor
        radius: 32
    }
}