
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, FormArray, Validators } from '@angular/forms';
import { ActivatedRoute, Router } from '@angular/router';
import { EventService } from 'src/app/service/event.service';

@Component({
  selector: 'app-event-form',
  templateUrl: './event-form.component.html',
  styleUrls: ['./event-form.component.css']
})
export class EventFormComponent implements OnInit {

  

  
    eventForm: FormGroup;
  
    constructor(
      private fb: FormBuilder,
      private eventService: EventService,
      private route: ActivatedRoute,
      private router: Router
  
    ) {}
    eventId: number | null;
  
    ngOnInit() {
      this.eventForm = this.fb.group({
        code: ['', Validators.required],
        year: ['', Validators.required],
        subject: ['', Validators.required],
        title: ['', Validators.required],
        subTitle: [''],
        date: ['', Validators.required],
        venues: this.fb.array([]),
        highlights: this.fb.array([]),
        organisers: this.fb.array([]),
        fees: this.fb.array([]),
        phone: ['', Validators.required],
        email: ['', [Validators.required, Validators.email]],
        isActive: [true]
      });
 
      this.route.paramMap.subscribe(params => {
        const idParam = params.get('id');
        this.eventId = idParam ? +idParam : null;
    
        if (this.eventId !== null) {
          this.loadEvent(this.eventId);
        }
      });
    }
  
    loadEvent(id: number): void {
      this.eventService.getEvent(id).subscribe(event => {
        this.eventForm.patchValue(event);
        this.setArrayValues('venues', event.venues);
        this.setArrayValues('highlights', event.highlights);
        this.setArrayValues('organisers', event.organisers);
        this.setArrayValues('fees', event.fees);
      });
    }
  
    setArrayValues(controlName: string, values: any[]): void {
      const array = this.eventForm.get(controlName) as FormArray;
      values.forEach(value => array.push(this.fb.group(value)));
    }
  
    get venues(): FormArray {
      return this.eventForm.get('venues') as FormArray;
    }
  
    get highlights(): FormArray {
      return this.eventForm.get('highlights') as FormArray;
    }
  
    get organisers(): FormArray {
      return this.eventForm.get('organisers') as FormArray;
    }
  
    get fees(): FormArray {
      return this.eventForm.get('fees') as FormArray;
    }
  
    addVenue() {
      this.venues.push(this.fb.group({
        title: [''],
        date: [''],
        address: [''],
        info: ['']
      }));
    }
  
    removeVenue(index: number) {
      this.venues.removeAt(index);
    }
  
    addHighlight() {
      this.highlights.push(this.fb.control(''));
    }
  
    removeHighlight(index: number) {
      this.highlights.removeAt(index);
    }
  
    addOrganiser() {
      this.organisers.push(this.fb.control(''));
    }
  
    removeOrganiser(index: number) {
      this.organisers.removeAt(index);
    }
  
    addFee() {
      this.fees.push(this.fb.group({
        desc: [''],
        cost: ['']
      }));
    }
  
    removeFee(index: number) {
      this.fees.removeAt(index);
    }
  
    onSubmit(): void {
      if (this.eventForm.valid) {
        if (this.eventId) {
          this.eventService.updateEvent(this.eventId, this.eventForm.value).subscribe(() => this.router.navigate(['/events']));
        } else {
          this.eventService.createEvent(this.eventForm.value).subscribe(() => this.router.navigate(['/events']));
        }
      }
  }
}