import { Controller } from "./main";
import {BatteryState, SolarState} from "./api";

export class SolarView{
  solar_voltage_milli_volt: HTMLSpanElement;
  solar_current_milli_ampere: HTMLSpanElement;
  solar_is_day: HTMLSpanElement;
  solar_auto_refresh: HTMLInputElement;
    timer: NodeJS.Timeout | undefined;
    controller: Controller;

    constructor (controller:Controller) {
      (document.getElementById("solarview") as HTMLElement).innerHTML = require("./solarview.html")
        this.solar_voltage_milli_volt = document.getElementById("solar_voltage_milli_volt") as HTMLSpanElement;
        this.solar_current_milli_ampere = document.getElementById("solar_current_milli_ampere") as HTMLSpanElement;
        this.solar_is_day = document.getElementById("solar_is_day") as HTMLSpanElement;
        this.solar_auto_refresh = document.getElementById("solar_auto_refresh") as HTMLInputElement;

        this.controller = controller
        this.solar_auto_refresh.onchange = () => {
            if(this.timer){
              clearTimeout(this.timer)
            }
            if(this.solar_auto_refresh.checked){
              controller.updateSolarData()
            }
          }
    }

    update(solarState: SolarState|null){
        if (solarState == null) {
            this.solar_voltage_milli_volt.innerText = "N/A"
            this.solar_current_milli_ampere.innerText = "N/A"
            this.solar_is_day.innerText = "N/A"
        } else {
            this.solar_voltage_milli_volt.innerText = solarState.mppt_voltage.toFixed(0)
            this.solar_current_milli_ampere.innerText = solarState.mppt_current.toFixed(0)
            this.solar_is_day.innerText = solarState.is_day?"🌞":"🌙"
        }

        if(this.solar_auto_refresh.checked){
            this.timer = setTimeout(this.controller.updateSolarData, 1000);
          } else {
            if(this.timer){
              clearTimeout(this.timer)
            }
          }
    }
  }