import QtQuick
import QtQuick.Layouts
import qs.Services
import qs.Widgets

Item {
  property real scaling: 1
  readonly property string tabIcon: "schedule"
  readonly property string tabLabel: "Time & Weather"
  readonly property int tabIndex: 2
  Layout.fillWidth: true
  Layout.fillHeight: true

  ColumnLayout {
    anchors.fill: parent
    spacing: Style.marginMedium * scaling

    NText {
      text: "Time"
      font.weight: Style.fontWeightBold
      color: Colors.accentSecondary
    }

    NToggle {
      label: "Use 12 Hour Clock"
      description: "Display time in 12-hour format (e.g., 2:30 PM) instead of 24-hour format"
      value: Settings.data.location.use12HourClock
      onToggled: function (newValue) {
        Settings.data.location.use12HourClock = newValue
      }
    }

    NToggle {
      label: "US Style Date"
      description: "Display dates in MM/DD/YYYY format instead of DD/MM/YYYY"
      value: Settings.data.location.reverseDayMonth
      onToggled: function (newValue) {
        Settings.data.location.reverseDayMonth = newValue
      }
    }

    NDivider {
      Layout.fillWidth: true
    }

    NText {
      text: "Weather"
      font.weight: Style.fontWeightBold
      color: Colors.accentSecondary
    }

    NText {
      text: "Location"
      color: Colors.textPrimary
      font.weight: Style.fontWeightBold
    }
    NText {
      text: "Your city name for weather information"
      color: Colors.textSecondary
      font.pointSize: Style.fontSizeSmall * scaling
    }
    NTextBox {
      text: Settings.data.location.name
      Layout.fillWidth: true
      onEditingFinished: Settings.data.location.name = text
    }

    NText {
      text: "Temperature Unit"
      color: Colors.textPrimary
      font.weight: Style.fontWeightBold
    }
    NText {
      text: "Choose between Celsius and Fahrenheit"
      color: Colors.textSecondary
      font.pointSize: Style.fontSizeSmall * scaling
    }
    NComboBox {
      optionsKeys: ["c", "f"]
      optionsLabels: ["Celsius", "Fahrenheit"]
      currentKey: Settings.data.location.useFahrenheit ? "f" : "c"
      onSelected: function (key) {
        Settings.data.location.useFahrenheit = (key === "f")
      }
    }

    Item {
      Layout.fillHeight: true
    }
  }
}