import { Component, Inject } from '@angular/core';
import { NgFor, NgIf } from '@angular/common';
import { FormBuilder, FormControl, FormGroup, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';
import { MatButtonModule } from '@angular/material/button';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatDialogRef, MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
import { MatIconModule } from '@angular/material/icon';
import { MatInputModule } from '@angular/material/input';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatOptionModule } from '@angular/material/core';
import { MatSelectModule } from '@angular/material/select';

import { Jump, JumpForm } from 'src/app/core/models';

@Component({
    selector: 'huapp-jump-edit-dialog',
    templateUrl: 'jump-edit.dialog.html',
    standalone: true,
    imports: [
        NgFor, NgIf, FormsModule, ReactiveFormsModule,
        MatButtonModule, MatCheckboxModule, MatDatepickerModule,
        MatDialogModule, MatFormFieldModule, MatIconModule,
        MatInputModule, MatSelectModule, MatOptionModule
    ]
})
export class JumpEditDialogComponent {
    public tagField = new FormControl<string>('', { nonNullable: true});
    public jumpForm: FormGroup;

    constructor(
        public dialogRef: MatDialogRef<JumpEditDialogComponent>,
        private fb: FormBuilder,
        @Inject(MAT_DIALOG_DATA) public jump: Jump
    ) {
        let controlsConfig = {
            slug: [this.jump.slug, Validators.required],
            date: [this.jump.date, Validators.required],
            numero: [this.jump.numero, Validators.required],
            lieu: [this.jump.lieu, Validators.required],
            oaci: this.jump.oaci,
            aeronef: [this.jump.aeronef, Validators.required],
            imat: this.jump.imat,
            hauteur: [this.jump.hauteur, Validators.required],
            deploiement: this.jump.deploiement,
            voile: this.jump.voile,
            taille: [this.jump.taille, Validators.required],
            categorie: this.jump.categorie,
            module: this.jump.module,
            participants: [this.jump.participants, Validators.required],
            programme: this.jump.programme,
            accessoires: this.jump.accessoires,
            zone: this.jump.zone,
            dossier: this.jump.dossier,
            video: this.jump.video
        };
        this.jumpForm = this.fb.group(controlsConfig);
    }

    addSautant(): void {
        const tag = this.tagField.value;
        if (tag != null && tag.trim() !== '' && this.jump.sautants.indexOf(tag) < 0) {
            this.jump.sautants.push(tag);
        }
        const participants = (this.jump.sautants.length + 1);
        this.jumpForm.controls['participants'].setValue(participants);
        this.tagField.reset('');
    }

    closeDialog(): void {
        // close the dialog without result
        this.dialogRef.close();
    }

    getErrorMessage(name: string): string {
        if (this.jumpForm.controls[name].errors !== null) {
            return `Ce champ est requis.`;
        }
        return '';
    }

    removeSautant(index: string): void {
        this.jump.sautants = this.jump.sautants.filter((sautant) => sautant !== index);
        const participants = (this.jump.sautants.length + 1);
        this.jumpForm.controls['participants'].setValue(participants);
    }

    submitForm(): void {
        // update the model
        this.updateJump(this.jumpForm.value);
        // close the dialog with result
        this.dialogRef.close(this.jump);
    }

    updateJump(values: NonNullable<unknown>): void {
        Object.assign(this.jump, values);
    }
}
