import { Location } from '@angular/common';
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { ActivatedRoute, Router } from '@angular/router';
import { AllowanceService } from 'src/app/services/allowance.service';

@Component({
  selector: 'app-edit-allowance',
  templateUrl: './edit-allowance.page.html',
  styleUrls: ['./edit-allowance.page.scss'],
  standalone: false
})
export class EditAllowancePage implements OnInit {
  public form: FormGroup;
  public goalId: number;
  public userId: number;
  public isAddMode: boolean;
  public selectedColor: string = '';
  public possibleColors: Array<string> = [
    '#6199D9',
    '#D98B61',
    '#DBC307',
    '#13DEB5',
    '#7DCB7D',
    '#CF1DBD',
    '#F53311',
    '#2F00FF',
    '#098B0D',
    '#1BC2E8'
  ];

  constructor(
    private route: ActivatedRoute,
    private formBuilder: FormBuilder,
    private allowanceService: AllowanceService,
    private router: Router,
    private location: Location
  ) {
    this.userId = this.route.snapshot.params['id'];
    this.goalId = this.route.snapshot.params['goalId'];
    this.isAddMode = !this.goalId;

    this.allowanceService.getAllowanceList(this.userId).subscribe((list) => {
      for (let allowance of list) {
        this.possibleColors = this.possibleColors.filter(color => color !== allowance.colour);
        if (!this.isAddMode && +this.goalId === allowance.id) {
          this.possibleColors.unshift(allowance.colour);
        }
      }
    });

    this.form = this.formBuilder.group({
      name: ['', Validators.required],
      target: ['', Validators.required],
      weight: ['', Validators.required],
      color: ['', Validators.required]
    });
  }

  ngOnInit() {
    if (!this.isAddMode) {
      this.allowanceService.getAllowanceById(this.goalId, this.userId).subscribe((allowance) => {
        if (+this.goalId === 0) {
          this.form.setValue({
            name: 'Main Allowance',
            target: 0,
            weight: allowance.weight,
            color: '#9C4BE4'
          });
        } else {
          this.form.setValue({
            name: allowance.name,
            target: allowance.target,
            weight: allowance.weight,
            color: allowance.colour
          });
          this.selectedColor = this.form.value.color;
        }
      });
    }
  }

  submit() {
    const formValue = this.form.value;
    const allowance = {
      name: formValue.name,
      target: formValue.target,
      weight: formValue.weight,
      colour: formValue.color,
    };

    if (this.isAddMode) {
      this.allowanceService.createAllowance(allowance, this.userId);
    } else {
      this.allowanceService.updateAllowance(allowance, this.goalId, this.userId);
    }

    this.router.navigate(['/tabs/allowance', this.userId]);
  }

  deleteAllowance() {
    this.allowanceService.deleteAllowance(this.goalId, this.userId);
    this.router.navigate(['/tabs/allowance', this.userId]);
  }

  navigateBack() {
    this.location.back();
  }
}
