import { Component, Inject, OnDestroy } from '@angular/core';
import { AsyncPipe, DatePipe } from '@angular/common';
import { FormBuilder, FormControl, FormGroup, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';
import { MatAutocompleteModule } from '@angular/material/autocomplete';
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 { Observable, Subscription } from 'rxjs';
import { map, startWith } from 'rxjs/operators';

import { AeronefByImat, CanopyModelBySize, DropZoneByOaci, Jump, JumpByModule } from '@models';
import { AeronefsService, CanopiesService, DropZonesService, JumpsService } from '@services';

@Component({
    selector: 'app-jump-edit-dialog',
    templateUrl: 'jump-edit.dialog.html',
    standalone: true,
    imports: [
    AsyncPipe,
    DatePipe,
    FormsModule,
    ReactiveFormsModule,
    MatAutocompleteModule,
    MatButtonModule,
    MatCheckboxModule,
    MatDatepickerModule,
    MatDialogModule,
    MatFormFieldModule,
    MatIconModule,
    MatInputModule,
    MatSelectModule,
    MatOptionModule
]
})
export class JumpEditDialogComponent implements OnDestroy {
    private _aeronefByImat: Subscription = new Subscription();
    private _canopyModelBySize: Subscription = new Subscription();
    private _dropZoneByOaci: Subscription = new Subscription();
    private _jumpByModule: Subscription = new Subscription();
    public tagField = new FormControl<string>('', { nonNullable: true});
    public jumpForm: FormGroup;
    public inputOptions: {
        aeronefs: Array<AeronefByImat>;
        canopies: Array<CanopyModelBySize>;
        dropzones: Array<DropZoneByOaci>;
        categories: Array<JumpByModule>;
    };
    public filteredOptions: {
        aeronefs: Observable<Array<AeronefByImat>>;
        imats: Observable<Array<AeronefByImat>>;
        canopies: Observable<Array<CanopyModelBySize>>;
        tailles: Observable<Array<CanopyModelBySize>>;
        dropzones: Observable<Array<DropZoneByOaci>>;
        oaci: Observable<Array<DropZoneByOaci>>;
        categories: Observable<Array<JumpByModule>>;
        modules: Observable<Array<JumpByModule>>;
    };

    constructor(
        public dialogRef: MatDialogRef<JumpEditDialogComponent>,
        private fb: FormBuilder,
        private _aeronefsService: AeronefsService,
        private _canopiesService: CanopiesService,
        private _dropZonesService: DropZonesService,
        private _jumpsService: JumpsService,
        @Inject(MAT_DIALOG_DATA) public jump: Jump
    ) {
        this.inputOptions = { aeronefs: [], canopies: [], dropzones: [], categories: [] };
        const 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?.toString(), 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);

        this.filteredOptions = {
            aeronefs: this.jumpForm.controls['aeronef'].valueChanges.pipe(
                startWith(''),
                map(value => {
                    const aeronef = typeof value === 'string' ? value : value?.aeronef;
                    return aeronef ? this._filterImat(aeronef as string) : this.inputOptions.aeronefs.slice();
                }),
            ),
            imats: this.jumpForm.controls['imat'].valueChanges.pipe(
                startWith(''),
                map(value => {
                    const imat = typeof value === 'string' ? value : value?.imat;
                    return imat ? this._filterImat(imat as string) : this.inputOptions.aeronefs.slice();
                }),
            ),
            canopies: this.jumpForm.controls['voile'].valueChanges.pipe(
                startWith(''),
                map(value => {
                    const voile = typeof value === 'string' ? value : value?.voile;
                    return voile ? this._filterTaille(voile as string) : this.inputOptions.canopies.slice();
                }),
            ),
            tailles: this.jumpForm.controls['taille'].valueChanges.pipe(
                startWith(''),
                map(value => {
                    const taille = typeof value === 'string' ? value : value?.taille.toString();
                    return taille ? this._filterTaille(taille as string) : this.inputOptions.canopies.slice();
                }),
            ),
            dropzones: this.jumpForm.controls['lieu'].valueChanges.pipe(
                startWith(''),
                map(value => {
                    const lieu = typeof value === 'string' ? value : value?.lieu;
                    return lieu ? this._filterOaci(lieu as string) : this.inputOptions.dropzones.slice();
                }),
            ),
            oaci: this.jumpForm.controls['oaci'].valueChanges.pipe(
                startWith(''),
                map(value => {
                    const oaci = typeof value === 'string' ? value : value?.oaci;
                    return oaci ? this._filterOaci(oaci as string) : this.inputOptions.dropzones.slice();
                }),
            ),
            categories: this.jumpForm.controls['categorie'].valueChanges.pipe(
                startWith(''),
                map(value => {
                    const category = typeof value === 'string' ? value : value?.categorie;
                    return category ? this._filterModule(category as string) : this.inputOptions.categories.slice();
                }),
            ),
            modules: this.jumpForm.controls['module'].valueChanges.pipe(
                startWith(''),
                map(value => {
                    const module = typeof value === 'string' ? value : value?.module;
                    return module ? this._filterModule(module as string) : this.inputOptions.categories.slice();
                }),
            )
        };
        this._loadAeronefByImat();
        this._loadCanopyModelBySize();
        this._loadDropZoneByOaci();
        this._loadJumpByModule();
    }

    ngOnDestroy() {
        this._aeronefByImat.unsubscribe();
        this._canopyModelBySize.unsubscribe();
        this._dropZoneByOaci.unsubscribe();
        this._jumpByModule.unsubscribe();
    }

    private _filterImat(imat: string): Array<AeronefByImat> {
        const filterValue = imat.toLowerCase();
        return this.inputOptions.aeronefs.filter(option => (option.aeronef.toLowerCase().includes(filterValue) || option.imat.toLowerCase().includes(filterValue)));
    }

    private _filterModule(module: string): Array<JumpByModule> {
        const filterValue = module.toLowerCase();
        return this.inputOptions.categories.filter(option => (option.categorie.toLowerCase().includes(filterValue) || option.module.toLowerCase().includes(filterValue)));
    }

    private _filterOaci(oaci: string): Array<DropZoneByOaci> {
        const filterValue = oaci.toLowerCase();
        return this.inputOptions.dropzones.filter(option => (option.lieu.toLowerCase().includes(filterValue) || option.oaci.toLowerCase().includes(filterValue)));
    }

    private _filterTaille(taille: string): Array<CanopyModelBySize> {
        const filterValue = taille.toLowerCase();
        return this.inputOptions.canopies.filter(option => (option.voile.toLowerCase().includes(filterValue) || option.taille.toString().includes(filterValue)));
    }

    private _loadAeronefByImat(): void {
        const aeronefs$ = this._aeronefsService.getAllByImat();
        this._aeronefByImat = aeronefs$.subscribe((aggregate: Array<AeronefByImat>) => {
            this.inputOptions.aeronefs = aggregate;
        });
    }

    private _loadCanopyModelBySize(): void {
        const canopies$ = this._canopiesService.getAllBySizeByModel();
        this._canopyModelBySize = canopies$.subscribe((aggregate: Array<CanopyModelBySize>) => {
            this.inputOptions.canopies = aggregate;
        });
    }

    private _loadDropZoneByOaci(): void {
        const dropzones$ = this._dropZonesService.getAllByOaci();
        this._dropZoneByOaci = dropzones$.subscribe((aggregate: Array<DropZoneByOaci>) => {
            this.inputOptions.dropzones = aggregate;
        });
    }

    private _loadJumpByModule(): void {
        const jumps$ = this._jumpsService.getAllByModule();
        this._jumpByModule = jumps$.subscribe((aggregate: Array<JumpByModule>) => {
            this.inputOptions.categories = aggregate;
        });
    }

    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();
    }

    displayAeronefFn(aeronef: AeronefByImat): string {
        let res = '';
        if (aeronef) {
            if (typeof aeronef === 'string') {
                res = aeronef;
            } else {
                res = aeronef.aeronef ? aeronef.aeronef : '';
            }
        }
        return res;
    }

    displayImatFn(aeronef: AeronefByImat): string {
        let res = '';
        if (aeronef) {
            if (typeof aeronef === 'string') {
                res = aeronef;
            } else {
                res = aeronef.imat ? aeronef.imat : '';
            }
        }
        return res;
    }

    displayLieuFn(dropzone: DropZoneByOaci): string {
        let res = '';
        if (dropzone) {
            if (typeof dropzone === 'string') {
                res = dropzone;
            } else {
                res = dropzone.lieu ? dropzone.lieu : '';
            }
        }
        return res;
    }

    displayOaciFn(dropzone: DropZoneByOaci): string {
        let res = '';
        if (dropzone) {
            if (typeof dropzone === 'string') {
                res = dropzone;
            } else {
                res = dropzone.oaci ? dropzone.oaci : '';
            }
        }
        return res;
    }

    displayTailleFn(canopy: CanopyModelBySize): string {
        let res = '';
        if (canopy) {
            if (typeof canopy === 'string') {
                res = canopy;
            } else {
                res = canopy.taille ? canopy.taille.toString() : '';
            }
        }
        return res;
    }

    displayVoileFn(canopy: CanopyModelBySize): string {
        let res = '';
        if (canopy) {
            if (typeof canopy === 'string') {
                res = canopy;
            } else {
                res = canopy.voile ? canopy.voile : '';
            }
        }
        return res;
    }

    displayCategorieFn(jump: JumpByModule): string {
        let res = '';
        if (jump) {
            if (typeof jump === 'string') {
                res = jump;
            } else {
                res = jump.categorie ? jump.categorie : '';
            }
        }
        return res;
    }

    displayModuleFn(jump: JumpByModule): string {
        let res = '';
        if (jump) {
            if (typeof jump === 'string') {
                res = jump;
            } else {
                res = jump.module ? jump.module : '';
            }
        }
        return res;
    }

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

    onSelAeronef(aeronef: AeronefByImat) {
        if (aeronef && aeronef.aeronef) {
            this.jumpForm.controls['imat'].setValue(aeronef);
        }
    }

    onSelImat(aeronef: AeronefByImat) {
        if (aeronef && aeronef.imat) {
            this.jumpForm.controls['aeronef'].setValue(aeronef);
        }
    }

    onSelLieu(dropzone: DropZoneByOaci) {
        if (dropzone && dropzone.oaci) {
            this.jumpForm.controls['oaci'].setValue(dropzone);
        }
    }

    onSelOaci(dropzone: DropZoneByOaci) {
        if (dropzone && dropzone.lieu) {
            this.jumpForm.controls['lieu'].setValue(dropzone);
        }
    }

    onSelTaille(canopy: CanopyModelBySize) {
        if (canopy && canopy.voile) {
            this.jumpForm.controls['voile'].setValue(canopy);
        }
    }

    onSelVoile(canopy: CanopyModelBySize) {
        if (canopy && canopy.taille) {
            this.jumpForm.controls['taille'].setValue(canopy);
        }
    }

    onSelCategorie(jump: JumpByModule) {
        if (jump && jump.categorie) {
            this.jumpForm.controls['module'].setValue(jump);
        }
    }

    onSelModule(jump: JumpByModule) {
        if (jump && jump.module) {
            this.jumpForm.controls['categorie'].setValue(jump);
        }
    }

    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);
        this.jump.lieu = typeof this.jumpForm.controls['lieu'].value === 'string' ? this.jumpForm.controls['lieu'].value : this.jumpForm.controls['lieu'].value.lieu;
        this.jump.oaci = typeof this.jumpForm.controls['oaci'].value === 'string' ? this.jumpForm.controls['oaci'].value : this.jumpForm.controls['oaci'].value.oaci;
        this.jump.aeronef = typeof this.jumpForm.controls['aeronef'].value === 'string' ? this.jumpForm.controls['aeronef'].value : this.jumpForm.controls['aeronef'].value.aeronef;
        this.jump.imat = typeof this.jumpForm.controls['imat'].value === 'string' ? this.jumpForm.controls['imat'].value : this.jumpForm.controls['imat'].value.imat;
        this.jump.voile = typeof this.jumpForm.controls['voile'].value === 'string' ? this.jumpForm.controls['voile'].value : this.jumpForm.controls['voile'].value.voile;
        this.jump.taille = typeof this.jumpForm.controls['taille'].value === 'string' ? this.jumpForm.controls['taille'].value : this.jumpForm.controls['taille'].value.taille;
        this.jump.categorie = typeof this.jumpForm.controls['categorie'].value === 'string' ? this.jumpForm.controls['categorie'].value : this.jumpForm.controls['categorie'].value.categorie;
        this.jump.module = typeof this.jumpForm.controls['module'].value === 'string' ? this.jumpForm.controls['module'].value : this.jumpForm.controls['module'].value.module;
        // close the dialog with result
        this.dialogRef.close(this.jump);
    }

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