import { Component, ChangeDetectionStrategy, OnInit, ViewChild } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { Router } from '@angular/router';
import { DataTableDirective } from 'angular-datatables';
import { forkJoin, Subject } from 'rxjs';
import { HttpErrorResponse } from '@angular/common/http';
import { CrudService } from 'src/app/crud.service';
import { NzModalService } from 'ng-zorro-antd/modal';
import { NzMessageService } from 'ng-zorro-antd/message';
import { GlobalService } from 'src/app/global.service';

export interface Bloc {
  id: number;
  cote: string;
  nom: string;
  arrondissement: any;
  structure: any;
  quartier: any;
  secteurDecoupage: any;
  secteur: any;
  quartiers: any[];
}

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

  @ViewChild(DataTableDirective, { static: false })
  dtElement?: DataTableDirective;
  dtOptions: DataTables.Settings = {};
  dtTrigger: Subject<any> = new Subject<any>();

  isForm = false;
  quartierList: any[] = [];
  arrondissementList: any[] = [];
  arrondissementFilteredList: any[] = [];
  communeList: any[] = [];
  structureList: any[] = [];
  secteurList: any[] = [];
  secteurDecoupageList: any[] = [];

  blocList: any[] = [];

  arrondissementPaylod: any = null;
  communePaylod: any = null;
  structurePaylod: any = null;

  blocForm?: FormGroup;
  isActionInProgress: boolean = false;

  constructor(
    private fb: FormBuilder,
    private router: Router,
    private crudService: CrudService,
    private modal: NzModalService,
    private message: NzMessageService,
    private globalService: GlobalService
  ) {
    this.globalService.getLodingSuccess().subscribe({
      next: (data: boolean) => {
        this.isActionInProgress = data;
      },
      error: () => {
        this.isActionInProgress = false;
      }
    });
  }

  ngOnInit(): void {
    this.globalService.setLodingSuccess(false);
    this.dtOptions = {
      pagingType: 'full_numbers',
      pageLength: 10,
      processing: true,
      language: {
        search: "Rechercher&nbsp;:",
        emptyTable: "Aucune donnée disponible",
        lengthMenu: "Afficher _MENU_ &eacute;l&eacute;ments",
        info: "Affichage de l'&eacute;lement _START_ &agrave; _END_ sur _TOTAL_ &eacute;l&eacute;ments",
        infoEmpty: "Affichage de l'&eacute;lement 0 &agrave; 0 sur 0 &eacute;l&eacute;ments",
        infoFiltered: "(filtr&eacute; de _MAX_ &eacute;l&eacute;ments au total)",
        paginate: {
          first: "<i class='menu-icon mdi mdi-chevron-double-left'></i>",
          previous: "<i class='menu-icon mdi mdi-chevron-left'></i>",
          next: "<i class='menu-icon mdi mdi-chevron-right'></i>",
          last: "<i class='menu-icon mdi mdi-chevron-double-right'></i>"
        },
      }
    };
    this.makeForm(null);
    this.list();
  }

  ngAfterViewInit(): void {
    this.dtTrigger.next(this.dtOptions);
  }

  compareFn = (o1: any, o2: any) => (o1 && o2 ? o1.id === o2.id : o1 === o2);

  makeForm(bloc: Bloc | null): void {
    this.blocForm = this.fb.group({
      id: [bloc != null ? bloc.id : null],
      cote: [bloc != null ? bloc.cote : null],
      nom: [bloc != null ? bloc.nom : null,
      [Validators.required]],
      arrondissement: [bloc != null ? bloc.arrondissement : null],
      quartier: [bloc != null ? bloc.quartier : null],
      structure: [bloc != null ? bloc.structure : null],
      secteur: [bloc != null ? bloc.secteur : null, [Validators.required]],
      secteurDecoupage: [bloc != null ? bloc.secteurDecoupage : null],
      quartiers: [bloc != null ? bloc.quartiers : []],
    });
    if (bloc != null) {
      this.showHideForm(true);
    }
  }

  resetForm(e: MouseEvent): void {
    e.preventDefault();
    this.blocForm?.reset();
    for (const key in this.blocForm?.controls) {
      this.blocForm?.controls[key].markAsPristine();
      this.blocForm?.controls[key].updateValueAndValidity();
    }
    this.makeForm(null);
  }

  ngOnDestroy(): void {
    this.dtTrigger.unsubscribe();
  }

  checkSecteurDecoupageBySecteur(value: any): void {
    this.secteurDecoupageList = [];
    if(value) {
      this.secteurDecoupageList = value.secteurDecoupages;
    }
  }


  checkSecteurDecoupage(value: any): void {
    this.blocForm?.get('arrondissement')?.setValue(null);
    this.blocForm?.get('quartier')?.setValue(null);
    if(value) {
      this.blocForm?.get('arrondissement')?.setValue(value.arrondissement);
      this.blocForm?.get('quartier')?.setValue(value.quartier);
    }
  }

  list(): void {
    this.globalService.setLodingSuccess(true);
    /*this.communeList = [];
    this.arrondissementList = [];*/
    this.structureList = [];

    //const $quartiers = this.crudService.getAll('quartier/all');
    //const $communes = this.crudService.getAll('commune/all');
    //const $arrondissements = this.crudService.getAll('arrondissement/commune/58');
    const $structures = this.crudService.getAll('structure/all');

    forkJoin([$structures]).subscribe(([structures]) => {
      // All data available
      console.log(structures);
      //console.log(communes);
      //const dataCommune: any = communes;
      const dataStructures: any = structures;

      this.structureList = dataStructures.object;
      //this.communeList = dataCommune.object;

      this.globalService.setLodingSuccess(false);
    },
      (error: HttpErrorResponse) => {
        console.log('OK');
        this.globalService.setLodingSuccess(false);
      });
  }

  /*filterArrondissementByCommune(value: any): void {
    console.log('value ==> ', value)
    this.communePaylod = value;
    this.listQuartierByArrondissement(null);
    this.arrondissementFilteredList = [];
    if (this.communePaylod != null) {
      this.arrondissementFilteredList = this.arrondissementList.filter((element) => element.commune != null && element.commune.id == this.communePaylod.id);
    }
  }

  listQuartierByArrondissement(value: any): void {
    this.arrondissementPaylod = value;
    this.quartierList = [];
    this.structureList = [];
    this.blocList = [];
    this.refreshDataTable();
    if (this.arrondissementPaylod != null) {
      this.globalService.setLodingSuccess(true);
      const $quartiers = this.crudService.getAll('quartier/arrondissement/' + this.arrondissementPaylod?.id);
      const $blocs = this.crudService.getAll('bloc/list-by-arrondissement?idArrondissement='+ this.arrondissementPaylod?.id);
      const $structures = this.crudService.getAll('structure/all-by-arrondissement?arrondissementId='+ this.arrondissementPaylod?.id);
      
      forkJoin([$quartiers, $blocs, $structures]).subscribe(([quartiers, blocs, structures]) => {
        // All data available
        console.log(quartiers);
        console.log(blocs);
        const dataQuartier: any = quartiers;
        const dataBlocs: any = blocs;
        const dataStructures: any = structures;

        this.quartierList = dataQuartier.object;
        this.blocList = dataBlocs.object;
        this.structureList = dataStructures.object;

        this.quartierList = [...this.quartierList];
        this.refreshDataTable();
        this.globalService.setLodingSuccess(false);
      },
        (error: HttpErrorResponse) => {
          console.log('OK');
          this.globalService.setLodingSuccess(false);
        });
    }
  }*/

  listBlocsAndSecteurByStructure(value: any): void {
    this.structurePaylod = value;
    console.log("value ===> ", value);
    this.secteurList = [];
    this.secteurDecoupageList = [];
    this.blocList = [];
    this.blocForm?.reset();
    this.refreshDataTable();
    if (this.structurePaylod != null) {
      this.globalService.setLodingSuccess(true);
      this.crudService.getAll('secteur/by-structure-id/' + this.structurePaylod?.id).subscribe(
        (data: any) => {
          this.secteurList = data != null ? data.object : [];
        },
        (error: HttpErrorResponse) => {
          console.log('OK');
          this.globalService.setLodingSuccess(false);
        }
      );
      
      const $blocs = this.crudService.getAll('bloc/list-by-structure?idStructure='+ this.structurePaylod?.id);
   
      forkJoin([$blocs]).subscribe(([blocs]) => {
        // All data available
        console.log(blocs);
        const dataBlocs: any = blocs;

        this.blocList = dataBlocs.object;

        this.blocList = [...this.blocList];
        this.refreshDataTable();
        this.globalService.setLodingSuccess(false);
      },
        (error: HttpErrorResponse) => {
          console.log('OK');
          this.globalService.setLodingSuccess(false);
        });
    }
  }

  refreshDataTable(): void {
    this.dtElement?.dtInstance.then((dtInstance: DataTables.Api) => {
      // Destroy the table first
      dtInstance.destroy();
      // Call the dtTrigger to rerender again
      this.dtTrigger.next(null);
    });
  }

  showDeleteConfirm(element: any, index: number): void {
    this.modal.confirm({
      nzTitle: 'Confirmez-vous ?',
      nzContent: 'suppression de <strong style="color: red;">' + element.nom + '</strong>',
      nzOkText: 'Oui',
      nzOkType: 'primary',
      nzOkDanger: true,
      nzOnOk: () => {
        this.globalService.setLodingSuccess(true);
        this.crudService.deleteElement('bloc/delete', element.id).subscribe(
          (data: any) => {
            this.quartierList.splice(index, 1);
            this.refreshDataTable();
            this.message.create('success', `Suppression effectuée avec succès.`);
            this.globalService.setLodingSuccess(false);
          },
          (error: HttpErrorResponse) => {
            this.message.create('error', `Erreur de connexion internet ou du système`);
            this.globalService.setLodingSuccess(false);
          }
        );
      },
      nzCancelText: 'Non',
      nzOnCancel: () => console.log('Cancel')
    });
  }

  showHideForm(value: boolean): void {
    this.isForm = value;
    if (!value) {
      this.makeForm(null);
    }
  }

  saveForm(): void {
    for (const i in this.blocForm?.controls) {
      this.blocForm?.controls[i].markAsDirty();
      this.blocForm?.controls[i].updateValueAndValidity();
    }

    if (this.blocForm?.valid) {
      this.isActionInProgress = true;
      const formData = this.blocForm?.value;
      formData.structure = this.structurePaylod;
      if (
        formData.id == null ||
        formData.id == undefined ||
        formData.id == ''
      ) {
        this.globalService.setLodingSuccess(true);
        this.crudService.save('bloc/create', formData).subscribe(
          (data: any) => {
            this.blocList.unshift(data.object);
            this.message.create('success', `Enregistrement effectué avec succès.`);
            this.makeForm(null);
            this.refreshDataTable();
            this.globalService.setLodingSuccess(false);
          },
          (error: HttpErrorResponse) => {
            this.message.create('error', `Erreur de connexion internet ou du système`);
            this.globalService.setLodingSuccess(false);
          }
        );
      } else {
        const i = this.blocList.findIndex(
          (element) => element.id == formData.id
        );
        this.globalService.setLodingSuccess(true);
        this.crudService.update('bloc/update', formData).subscribe(
          (data: any) => {
            this.blocList.splice(i, 1);
            this.blocList.unshift(data.object);
            this.message.create('success', `Modification effectuée avec succès.`);
            this.makeForm(null);
            this.refreshDataTable();
            this.showHideForm(false);
            this.globalService.setLodingSuccess(false);
          },
          (error: HttpErrorResponse) => {
            this.message.create('error', `Erreur de connexion internet ou du système`);
            this.globalService.setLodingSuccess(false);
          }
        );
      }
    } else {
      this.modal.error({
        nzTitle: 'Erreur',
        nzContent: 'Formulaire invalid. Un ou plusieurs champs sont vides...'
      });
    }
  }

}