import Elementary
import PsychrometricClient

struct PsychrometricPropertiesView: HTML {
  let properties: PsychrometricProperties

  var content: some HTML<HTMLTag.div> {
    div(.class("w-full")) {
      displayProperty("Dew Point", \.dewPoint.rawValue)
      displayProperty("Wet Bulb", \.wetBulb.rawValue)
      displayProperty("Enthalpy", \.enthalpy.rawValue)
      displayProperty("Density", \.density.rawValue)
      displayProperty("Vapor Pressure", \.vaporPressure.rawValue)
      displayProperty("Specific Volume", properties.specificVolume.rawValue)
      displayProperty("Absolute Humidity", \.absoluteHumidity)
      displayProperty("Humidity Ratio", properties.humidityRatio.value)
      displayProperty("Degree of Saturation", properties.degreeOfSaturation.value)
    }
  }

  private func displayProperty(_ label: String, _ value: Double, _ symbol: String? = nil) -> some HTML {
    let symbol = "\(symbol == nil ? "" : " \(symbol!)")"

    return div(.class("flex items-center justify-between text-blue-500 dark:text-slate-200")) {
      span(.class("font-semibold")) { "\(label): " }
      span(.class("font-light")) {
        "\(double: value)\(symbol)"
      }
    }
  }

  private func displayProperty<N: NumberWithUnitOfMeasure>(
    _ label: String,
    _ keyPath: KeyPath<PsychrometricProperties, N>
  ) -> some HTML where N.Number == Double, N.Units: RawRepresentable, N.Units.RawValue == String {
    let property = properties[keyPath: keyPath]
    return displayProperty(label, property.rawValue, property.units.rawValue)
  }
}