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

Rectangle {
    id: control

    property string value: ""
    property string currentColor: rgbToHex(redSlider.value, greenSlider.value, blueSlider.value)
    property bool isDarkColor: control.checkIsDarkColor(value)

    implicitHeight: width

    onValueChanged: {
        var rgb = hexToRgb(value)

        redSlider.value = rgb.r
        greenSlider.value = rgb.g
        blueSlider.value = rgb.b
    }

    onCurrentColorChanged: {
        value = currentColor
    }

    function rgbToHex(r, g, b) {
      return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
    }

    function hexToRgb(hex) {
      var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
      return result ? {
        r: parseInt(result[1], 16),
        g: parseInt(result[2], 16),
        b: parseInt(result[3], 16)
      } : null;
    }

    function checkIsDarkColor(color) {
        var temp = Qt.darker(color, 1) //Force conversion to color QML type object
        var a = 1 - ( 0.299 * temp.r + 0.587 * temp.g + 0.114 * temp.b);
        return temp.a > 0 && a >= 0.3
    }

    ColumnLayout {
        anchors.fill: parent

        Rectangle {
            Layout.fillWidth: true
            Layout.preferredHeight: parent.height * 0.5
            color: control.currentColor
        }

        Slider {
            id: redSlider
            Layout.fillWidth: true
            Layout.fillHeight: true

            from: 0
            to: 255
            stepSize: 1

            Material.accent: Material.Red
        }

        Slider {
            id: greenSlider
            Layout.fillWidth: true
            Layout.fillHeight: true

            from: 0
            to: 255
            stepSize: 1

            Material.accent: Material.Green
        }

        Slider {
            id: blueSlider
            Layout.fillWidth: true
            Layout.fillHeight: true

            from: 0
            to: 255
            stepSize: 1

            Material.accent: Material.Blue
        }

    }
}