import { Component } from "@angular/core";
import { FormBuilder, FormControl, FormGroup, Validators } from "@angular/forms";
import { NgbActiveModal } from "@ng-bootstrap/ng-bootstrap";

@Component({
  selector: "app-control-scheduler",
  templateUrl: "./control-scheduler.component.html",
  styleUrls: ["./control-scheduler.component.css"],
})
export class ControlSchedulerComponent {
  labelModal: string = "";
  myForm: FormGroup;
  dataSwitch = [
    {
      label: 'On',
      value: true
    }, {
      label: 'Off',
      value: false
    }
  ];

  daysOfWeek = [
    { label: 'Monday', value: 'monday' },
    { label: 'Tuesday', value: 'tuesday' },
    { label: 'Wednesday', value: 'wednesday' },
    { label: 'Thursday', value: 'thursday' },
    { label: 'Friday', value: 'friday' },
    { label: 'Saturday', value: 'saturday' },
    { label: 'Sunday', value: 'sunday' }
  ];

  selectedDays: string[] = [];

  constructor(
    public activeModal: NgbActiveModal,
    private fb: FormBuilder,
  ) {}

  ngOnInit() {
    this.createForm()
  }

  createForm() {
    const controls = {
      timeset: ["", Validators.required],
      switch: [false],
      repeat: [false], // Default value for repeat checkbox
    };

    // Initialize checkboxes for each day of the week
    this.daysOfWeek.forEach(day => {
      controls[day.value] = [false]; // Each day starts as unchecked
    });

    this.myForm = this.fb.group(controls);
  }

  onDayChange(day: string, isChecked: boolean) {
    if (isChecked) {
      this.selectedDays.push(day);
    } else {
      this.selectedDays = this.selectedDays.filter(d => d !== day);
    }
  }

  save() {
    const formValues = this.myForm.value;

    // Collect selected days' labels
    const selectedDays = this.daysOfWeek
      .filter(day => formValues[day.value])
      .map(day => day.label);

    // Construct the final output
    const result = {
      timeset: formValues.timeset,
      switch: formValues.switch,
      repeat: formValues.repeat,
      day: selectedDays
    };

    console.log("Form Result: ", result);
  }
}