import QtQuick 2.0
import QtQuick.Layouts 1.3
import org.kde.plasma.core 2.0 as PlasmaCore
import org.kde.plasma.components 2.0 as PlasmaComponents
import QtQuick.Controls 2.5 as QQC2
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

  property alias cfg_notifications: notifications.checked
  property alias cfg_batteryThreshold: batteryThreshold.value

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

    GridLayout {
      columns: 3
      rows: 2
      rowSpacing: 10

      // first row
      Text {
        text: "polling rate:"
        color: PlasmaCore.Theme.textColor
      }
      PlasmaComponents.Slider {
        id: pollingrate
        value: 10
        minimumValue: 2
        maximumValue: 60
        stepSize: 2
      }
      Text {
        text: cfg_pollingrate + " seconds"
        color: PlasmaCore.Theme.textColor
      }

      // second row
      Text {
        text: "battery height:"
        color: PlasmaCore.Theme.textColor
      }
      PlasmaComponents.Slider {
        id: batteryheight
        value: 8.0
        minimumValue: 1
        maximumValue: 10
        stepSize: 1
      }
      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() ])
      }
    }

    GridLayout {
      columns: 3
      rows: 2
      rowSpacing: 10

      // first row
      Text {
        text: "notifications:"
        color: PlasmaCore.Theme.textColor
      }
      PlasmaComponents.CheckBox {
        id: notifications
      }
      Text {
        text: ""
      }

      // second row
      Text {
        text: "battery threshold:"
        color: PlasmaCore.Theme.textColor
      }
      PlasmaComponents.Slider {
        id: batteryThreshold
        value: 10
        minimumValue: 1
        maximumValue: 50
        stepSize: 1
      }
      Text {
        text: cfg_batteryThreshold
        color: PlasmaCore.Theme.textColor
      }
    }
  }
}