import QtQuick 2.0
import QtQuick.Layouts 1.3
import QtQuick.Controls 2.5 as QQC2
import org.kde.plasma.core 2.0 as PlasmaCore
import org.kde.kirigami 2.4 as Kirigami
import org.kde.kquickcontrols 2.0 as KQControls

import "./lib/helper.js" as Helper

QQC2.Pane {
  id: root

  property alias cfg_pollingrate: pollingrate.value
  property alias cfg_batteryheight: batteryheight.value
  property alias cfg_colorEmpty: colorEmpty.color
  property alias cfg_colorHalf: colorHalf.color
  property alias cfg_colorFull: colorFull.color

  Kirigami.FormLayout {
    anchors.fill: parent
    wideMode: false

    GridLayout {
      columns: 3
      rows: 2
      rowSpacing: 10

      // first row
      Text {
        text: "polling rate:"
        color: PlasmaCore.Theme.textColor
      }
      QQC2.Slider {
        id: pollingrate
        value: 10.0
        from: 2.0
        to: 60.0
        stepSize: 2.0
        snapMode: QQC2.Slider.SnapAlways
      }
      Text {
        text: cfg_pollingrate + " seconds"
        color: PlasmaCore.Theme.textColor
      }

      // second row
      Text {
        text: "battery height:"
        color: PlasmaCore.Theme.textColor
      }
      QQC2.Slider {
        id: batteryheight
        value: 8.0
        from: 1.0
        to: 10.0
        stepSize: 1.0
        snapMode: QQC2.Slider.SnapAlways
      }
      Text {
        text: cfg_batteryheight
        color: PlasmaCore.Theme.textColor
      }
    }

    // color config
    GridLayout {
      columns: 3
      rows: 3
      rowSpacing: 1

      // first row
      Text {
        text: "empty:"
        color: PlasmaCore.Theme.textColor
      }
      KQControls.ColorButton {
        id: colorEmpty
        color: cfg_colorEmpty
      }
      Text {
        text: cfg_colorEmpty
        color: PlasmaCore.Theme.textColor
      }

      // secod row
      Text {
        text: "half:"
        color: PlasmaCore.Theme.textColor
      }
      KQControls.ColorButton {
        id: colorHalf
        color: cfg_colorHalf
      }
      Text {
        text: cfg_colorHalf
        color: PlasmaCore.Theme.textColor
      }

      // third row
      Text {
        text: "full:"
        color: PlasmaCore.Theme.textColor
      }
      KQControls.ColorButton {
        id: colorFull
        color: cfg_colorFull
      }
      Text {
        text: cfg_colorFull
        color: PlasmaCore.Theme.textColor
      }
    }

    // color gradient example
    GridLayout {
      columns: 10
      rows: 1
      rowSpacing: 0

      Text {
        text: "█"
        color: Helper.interpolateColor(.1, [ cfg_colorEmpty.toString(), cfg_colorHalf.toString(), cfg_colorFull.toString() ])
      }
      Text {
        text: "█"
        color: Helper.interpolateColor(.2, [ cfg_colorEmpty.toString(), cfg_colorHalf.toString(), cfg_colorFull.toString() ])
      }
      Text {
        text: "█"
        color: Helper.interpolateColor(.3, [ cfg_colorEmpty.toString(), cfg_colorHalf.toString(), cfg_colorFull.toString() ])
      }
      Text {
        text: "█"
        color: Helper.interpolateColor(.4, [ cfg_colorEmpty.toString(), cfg_colorHalf.toString(), cfg_colorFull.toString() ])
      }
      Text {
        text: "█"
        color: Helper.interpolateColor(.5, [ cfg_colorEmpty.toString(), cfg_colorHalf.toString(), cfg_colorFull.toString() ])
      }
      Text {
        text: "█"
        color: Helper.interpolateColor(.6, [ cfg_colorEmpty.toString(), cfg_colorHalf.toString(), cfg_colorFull.toString() ])
      }
      Text {
        text: "█"
        color: Helper.interpolateColor(.7, [ cfg_colorEmpty.toString(), cfg_colorHalf.toString(), cfg_colorFull.toString() ])
      }
      Text {
        text: "█"
        color: Helper.interpolateColor(.8, [ cfg_colorEmpty.toString(), cfg_colorHalf.toString(), cfg_colorFull.toString() ])
      }
      Text {
        text: "█"
        color: Helper.interpolateColor(.9, [ cfg_colorEmpty.toString(), cfg_colorHalf.toString(), cfg_colorFull.toString() ])
      }
      Text {
        text: "█"
        color: Helper.interpolateColor( 1, [ cfg_colorEmpty.toString(), cfg_colorHalf.toString(), cfg_colorFull.toString() ])
      }
    }
  }
}