import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { MatDialogRef } from '@angular/material/dialog';
import { Meter, Meters } from 'src/app/core/dataModels/Meter';
import { MeterData } from 'src/app/core/dataModels/Meterdata';
import { UsageType } from 'src/app/core/dataModels/UsageType';
import { DatabaseService } from 'src/app/services/database.service';

@Component({
  selector: 'app-meter-data-add-dialog',
  templateUrl: './meter-data-add-dialog.component.html',
  styleUrls: ['./meter-data-add-dialog.component.scss'],
})
export class MeterDataAddDialogComponent implements OnInit {
  meters: Meter[] = [];
  usageTypes = UsageType;
  usageType: UsageType = UsageType.ENERGY;

  form: FormGroup = this.fb.group({
    date: [new Date(), Validators.required],
    meter: ['', Validators.required],
    amount: ['', Validators.required],
  });

  constructor(
    private fb: FormBuilder,
    private dialogRef: MatDialogRef<MeterDataAddDialogComponent>,
    private dataService: DatabaseService
  ) {}

  ngOnInit(): void {
    this.dataService.getMeters().subscribe({
      next: (meters: Meter[]) => {
        console.log({ meters });
        this.meters = meters;
      },
      error: (err) => {
        console.log('get meters error', { err });
      },
    });
  }

  submit() {
    if (this.form.valid) {
      const formValues = this.form.value;
      const newMeterData: MeterData = {
        amount: formValues.amount,
        date: formValues.date,
        meter: formValues.meter,
        type: this.usageType,
      };

      this.dialogRef.close(newMeterData);
    }
  }

  setUsageType(meterName: string): void {
    if (meterName === Meters['1HEM'] || meterName === Meters['1LOG']) {
      this.usageType = this.usageTypes.ENERGY;
    } else if (meterName === Meters.ABWASSER || meterName === Meters.WASSER) {
      this.usageType = this.usageTypes.WATER;
    }
  }
}