import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import org.kde.plasma.core as PlasmaCore
import org.kde.plasma.components as PlasmaComponents
import org.kde.kirigami as Kirigami
import org.kde.kquickcontrols as KQControls
import org.kde.kcmutils as KCM

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

KCM.SimpleKCM {
  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

  property int cfg_pollingrateDefault
  property int cfg_batteryheightDefault
  property string cfg_colorEmptyDefault
  property string cfg_colorHalfDefault
  property string cfg_colorFullDefault
  property bool cfg_notificationsDefault
  property int cfg_batteryThresholdDefault

  property bool cfg_debug_active
  property int cfg_debug_charge
  property bool cfg_debug_activeDefault
  property int cfg_debug_chargeDefault

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

    GridLayout {
      columns: 3
      rows: 2
      rowSpacing: 10

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

      // second row
      Text {
        text: "battery height:"
        color: PlasmaCore.Theme.textColor
      }
      Slider {
        id: batteryheight
        value: 8.0
        from: 1
        to: 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
      }
      Slider {
        id: batteryThreshold
        value: 10
        from: 1
        to: 50
        stepSize: 1
      }
      Text {
        text: cfg_batteryThreshold
        color: PlasmaCore.Theme.textColor
      }
    }
  }
}