const PLANT_COUNT = 8;


import {Controller} from "./main";

export class PlantViews {
    private readonly measure_moisture: HTMLButtonElement;
    private readonly plants: PlantView[] = []
    private readonly plantsDiv: HTMLDivElement
  
    constructor(syncConfig:Controller) {
      this.measure_moisture = document.getElementById("measure_moisture") as HTMLButtonElement
      this.measure_moisture.onclick = syncConfig.measure_moisture
      this.plantsDiv = document.getElementById("plants") as HTMLDivElement;
      for (let plantId = 0; plantId < PLANT_COUNT; plantId++) {
        this.plants[plantId] = new PlantView(plantId, this.plantsDiv, syncConfig);
      }
    }

    getConfig(): PlantConfig[] {
      const rv: PlantConfig[] = [];
      for (let i = 0; i < PLANT_COUNT; i++) {
        rv[i] = this.plants[i].getConfig();
      }
      return rv
    }
    update(moisture_a: [string], moisture_b: [string]) {
      for (let plantId = 0; plantId < PLANT_COUNT; plantId++) {
        const a = moisture_a[plantId]
        const b = moisture_b[plantId]
        this.plants[plantId].update(a,b)
      }
    }

    setConfig(plants: PlantConfig[]) {
      for (let plantId = 0; plantId < PLANT_COUNT; plantId++) {
        const plantConfig = plants[plantId];
        const plantView = this.plants[plantId];
        plantView.setConfig(plantConfig)
      }
    }
  }

export class PlantView {
    private readonly moistureSensorMinFrequency: HTMLInputElement;
    private readonly moistureSensorMaxFrequency: HTMLInputElement;
    private readonly plantId: number;
    private readonly plantDiv: HTMLDivElement;
    private readonly header: HTMLElement;
    private readonly testButton: HTMLButtonElement;
    private readonly targetMoisture: HTMLInputElement;
    private readonly pumpTimeS: HTMLInputElement;
    private readonly pumpCooldown: HTMLInputElement;
    private readonly pumpHourStart: HTMLSelectElement;
    private readonly pumpHourEnd: HTMLSelectElement;
    private readonly sensorBInstalled: HTMLInputElement;
    private readonly mode: HTMLSelectElement;
    private readonly moistureA: HTMLElement;
    private readonly moistureB: HTMLElement;
    private readonly maxConsecutivePumpCount: HTMLInputElement;
  
  
    constructor(plantId: number, parent:HTMLDivElement, controller:Controller) {
        this.plantId = plantId;
      this.plantDiv = document.createElement("div")! as HTMLDivElement
      const template = require('./plant.html') as string;
        this.plantDiv.innerHTML = template.replaceAll("${plantId}", String(plantId))
      
      this.plantDiv.classList.add("plantcontainer")
      parent.appendChild(this.plantDiv)
  
      this.header = document.getElementById("plant_"+plantId+"_header")!
      this.header.innerText = "Plant "+ (this.plantId+1)
  
      this.moistureA = document.getElementById("plant_"+plantId+"_moisture_a")! as HTMLElement;
      this.moistureB = document.getElementById("plant_"+plantId+"_moisture_b")! as HTMLElement;

      this.testButton = document.getElementById("plant_"+plantId+"_test")! as HTMLButtonElement;
      this.testButton.onclick = function(){
        controller.testPlant(plantId)
      }

      this.mode = document.getElementById("plant_"+plantId+"_mode") as HTMLSelectElement
      this.mode.onchange = function(){
        controller.configChanged()
      }

      this.targetMoisture = document.getElementById("plant_"+plantId+"_target_moisture")! as HTMLInputElement;
      this.targetMoisture.onchange = function(){
        controller.configChanged()
      }

      this.pumpTimeS = document.getElementById("plant_"+plantId+"_pump_time_s") as HTMLInputElement;
      this.pumpTimeS.onchange = function(){
        controller.configChanged()
      }

      this.pumpCooldown = document.getElementById("plant_"+plantId+"_pump_cooldown_min") as HTMLInputElement;
      this.pumpCooldown.onchange = function(){
        controller.configChanged()
      }

      this.pumpHourStart = document.getElementById("plant_"+plantId+"_pump_hour_start") as HTMLSelectElement;
      this.pumpHourStart.onchange = function(){
        controller.configChanged()
      }
      for (let i = 0; i < 24; i++) {
        let option = document.createElement("option");
        if (i == 10){
            option.selected = true
        }
        option.innerText = i.toString();
        this.pumpHourStart.appendChild(option);
      }

      this.pumpHourEnd = document.getElementById("plant_"+plantId+"_pump_hour_end") as HTMLSelectElement;
      this.pumpHourEnd.onchange = function(){
        controller.configChanged()
      }
      for (let i = 0; i < 24; i++) {
        let option = document.createElement("option");
        if (i == 19){
            option.selected = true
        }
        option.innerText = i.toString();
        this.pumpHourEnd.appendChild(option);
      }

      this.sensorBInstalled = document.getElementById("plant_"+plantId+"_sensor_b") as HTMLInputElement;
      this.sensorBInstalled.onchange = function(){
        controller.configChanged()
      }

      this.maxConsecutivePumpCount = document.getElementById("plant_"+plantId+"_max_consecutive_pump_count") as HTMLInputElement;
      this.maxConsecutivePumpCount.onchange = function(){
        controller.configChanged()
      }

        this.moistureSensorMinFrequency = document.getElementById("plant_"+plantId+"_min_frequency") as HTMLInputElement;
        this.moistureSensorMinFrequency.onchange = function(){
            controller.configChanged()
        }
        this.moistureSensorMinFrequency.onchange = () => {
            controller.configChanged();
        };

        this.moistureSensorMaxFrequency = document.getElementById("plant_"+plantId+"_max_frequency") as HTMLInputElement;
        this.moistureSensorMaxFrequency.onchange = () => {
            controller.configChanged();
        };
    }

    update(a: string, b: string) {
        this.moistureA.innerText = a
        this.moistureB.innerText = b
    }
  
    setConfig(plantConfig: PlantConfig) {
        this.mode.value = plantConfig.mode;
        this.targetMoisture.value = plantConfig.target_moisture.toString();
        this.pumpTimeS.value = plantConfig.pump_time_s.toString();
        this.pumpCooldown.value = plantConfig.pump_cooldown_min.toString();
        this.pumpHourStart.value = plantConfig.pump_hour_start.toString();
        this.pumpHourEnd.value = plantConfig.pump_hour_end.toString();
        this.sensorBInstalled.checked = plantConfig.sensor_b;
        this.maxConsecutivePumpCount.value = plantConfig.max_consecutive_pump_count.toString();

        // Set new fields
        this.moistureSensorMinFrequency.value =
            plantConfig.moisture_sensor_min_frequency?.toString() || "";
        this.moistureSensorMaxFrequency.value =
            plantConfig.moisture_sensor_max_frequency?.toString() || "";
    }

    getConfig(): PlantConfig {
        return {
            // hardcoded for now
            sensor_a: true,
            mode: this.mode.value,
            target_moisture: this.targetMoisture.valueAsNumber,
            pump_time_s: this.pumpTimeS.valueAsNumber,
            pump_cooldown_min: this.pumpCooldown.valueAsNumber,
            pump_hour_start: +this.pumpHourStart.value,
            pump_hour_end: +this.pumpHourEnd.value,
            sensor_b: this.sensorBInstalled.checked,
            max_consecutive_pump_count: this.maxConsecutivePumpCount.valueAsNumber,
            moisture_sensor_min_frequency: this.moistureSensorMinFrequency.valueAsNumber || null,
            moisture_sensor_max_frequency: this.moistureSensorMaxFrequency.valueAsNumber || null
        };
    }
  }