import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import qs.Commons
import qs.Widgets

RowLayout {
  id: root

  property real from: 0
  property real to: 1
  property real value: 0
  property real stepSize: 0.01
  property var cutoutColor: Color.mSurface
  property bool snapAlways: true
  property real heightRatio: 0.7
  property string text: ""
  property real textSize: Style.fontSizeM
  property real customHeight: -1
  property real customHeightRatio: -1
  property string label: ""
  property string description: ""
  property var defaultValue: undefined
  property bool showReset: false

  spacing: Style.marginL
  Layout.fillWidth: true

  // Signals
  signal moved(real value)
  signal pressedChanged(bool pressed, real value)

  readonly property bool isValueChanged: defaultValue !== undefined && (value !== defaultValue)
  readonly property string indicatorTooltip: {
    if (defaultValue === undefined)
      return "";
    var defaultVal = defaultValue;
    if (typeof defaultVal === "number") {
      // If it's a decimal between 0 and 1, format as percentage
      if (defaultVal > 0 && defaultVal <= 1 && from >= 0 && from < 1) {
        return I18n.tr("panels.indicator.default-value", {
                         "value": Math.floor(defaultVal * 100) + "%"
                       });
      }
      return I18n.tr("panels.indicator.default-value", {
                       "value": String(defaultVal)
                     });
    }
    return I18n.tr("panels.indicator.default-value", {
                     "value": String(defaultVal)
                   });
  }

  ColumnLayout {
    spacing: Style.marginS
    Layout.fillWidth: true

    NLabel {
      label: root.label
      description: root.description
      visible: root.label !== "" || root.description !== ""
      showIndicator: root.isValueChanged
      indicatorTooltip: root.indicatorTooltip
      opacity: root.enabled ? 1.0 : 0.6
      Layout.fillWidth: true
    }

    RowLayout {
      spacing: Style.marginL
      Layout.fillWidth: true

      NSlider {
        id: slider
        Layout.fillWidth: true
        from: root.from
        to: root.to
        value: root.value
        stepSize: root.stepSize
        cutoutColor: root.cutoutColor
        snapAlways: root.snapAlways
        heightRatio: root.customHeightRatio > 0 ? root.customHeightRatio : root.heightRatio
        onMoved: root.moved(value)
        onPressedChanged: root.pressedChanged(pressed, value)
      }

      NText {
        visible: root.text !== ""
        text: root.text
        pointSize: root.textSize
        family: Settings.data.ui.fontFixed
        opacity: root.enabled ? 1.0 : 0.6
        Layout.alignment: Qt.AlignVCenter
        Layout.preferredWidth: 45 * Style.uiScaleRatio
        horizontalAlignment: Text.AlignRight
      }
    }
  }

  Item {
    id: buttonItem
    visible: root.showReset && root.defaultValue !== undefined
    Layout.preferredWidth: 30 * Style.uiScaleRatio
    Layout.preferredHeight: 30 * Style.uiScaleRatio

    NIconButton {
      icon: "restore"
      enabled: root.enabled
      baseSize: Style.baseWidgetSize * 0.8
      tooltipText: I18n.tr("common.reset")
      onClicked: root.moved(root.defaultValue)
      anchors.right: parent.right
      anchors.verticalCenter: parent.verticalCenter
    }
  }
}