import { FlatTreeControl } from '@angular/cdk/tree';
import { HttpErrorResponse } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';
import { MatTreeFlatDataSource, MatTreeFlattener } from '@angular/material/tree';
import { Router } from '@angular/router';
import { filter, lastValueFrom } from 'rxjs';
import { ResponseDataFamilies, ArtitleResponse, FamiliesAndSubfamilies, ResponseDataArtitle, ItemFamily, DataTableResponse, ContentArtitle } from 'src/app/interfaces/acquisition-management/acquisition/artitle.interface';
import { ArtitleService } from 'src/app/services/acquisition-management/acquisition/artitle.service';
import { EncService } from 'src/app/services/enc/enc.service';
import { ResourcesService } from 'src/app/services/resources/resources.service';

/** Flat node with expandable and level information */


@Component({
  selector: 'app-shopping',
  templateUrl: './shopping.component.html',
  styleUrls: ['./shopping.component.css']
})
export class ShoppingComponent implements OnInit {
  // Variables del arbol de las categorias y subcategorías
  private _transformer = (node: FamiliesAndSubfamilies, level: number) => { return { expandable: !!node.SUBFAMILIAS && node.SUBFAMILIAS.length > 0, name: node.NOMBRE, level: level, id: node.ID }; };
  public treeControl = new FlatTreeControl<ItemFamily>( node => node.level, node => node.expandable );
  public treeFlattener = new MatTreeFlattener( this._transformer, node => node.level, node => node.expandable, node => node.SUBFAMILIAS);
  hasChild = (_: number, node: ItemFamily) => node.expandable;

  public arrArtitles: Array<ArtitleResponse>; // Arreglo de los artículos para iterar en la interfaz
  public arrArtitlesForFilter: Array<ArtitleResponse>; // Arreglo de los artículos para filtrar
  public arrFamiliesAndSubfamilies = new MatTreeFlatDataSource(this.treeControl, this.treeFlattener); // Arreglo de Familias y Subfamilias
  public isLoadingCategory: boolean; // Variable de carga de sección de las categorías
  public isLoadingArtitle: boolean; // Variable de carga de sección de lasc cards

  public quantityCarArtitle: number;

  constructor(
    private _artitleServices: ArtitleService,
    private _resourceService: ResourcesService,
    private _router: Router,
    private _encService: EncService,
  ) {
    this.isLoadingCategory = false;
    this.isLoadingArtitle = false;
    this.arrArtitles = [];
    this.arrArtitlesForFilter = [];
    this.quantityCarArtitle = null!;
  }

  ngOnInit(): void {
    this.getQuantityCarArtitle();
    this.getFamiliesAndSubfamilies();
    this.getArtitle();
  }

  // Obtener los artículos
  private async getArtitle(){
    this.isLoadingArtitle = true;
    await lastValueFrom(this._artitleServices.getArtitles()).then(
      (data: ResponseDataArtitle) => {
        this.arrArtitles =  !data.error ? data.response : [];
        this.arrArtitlesForFilter = [ ... this.arrArtitles ];
      }, (error: HttpErrorResponse) => this._resourceService.checkErrors(error)
    );
    this.isLoadingArtitle = false;
  }

  // Obtener las familias y Subfamilias
  private async getFamiliesAndSubfamilies(){
    this.isLoadingCategory = true;
    await lastValueFrom(this._artitleServices.getFamiliesAndSubfamilies()).then(
      (data: ResponseDataFamilies) => {
        this.arrFamiliesAndSubfamilies.data =  !data.error ? data.response : [];
      }, (error: HttpErrorResponse) => this._resourceService.checkErrors(error)
    );
    this.isLoadingCategory = false;
  }

  // Filtrar las Familias
  public async getFamilies(family: ItemFamily){
    this.isLoadingArtitle = true;
    this.arrArtitles = this.arrArtitlesForFilter.filter( (item:ArtitleResponse) => item.ID_FAMILIA === family.id);
    this.isLoadingArtitle = false;
  }

  // Filtrar las Subfamilias
  public async getSubfamilies(subfamily: ItemFamily){
    this.isLoadingArtitle = true;
    this.arrArtitles = this.arrArtitlesForFilter.filter( (item:ArtitleResponse) => item.ID_SUBFAMILIA === subfamily.id);
    this.isLoadingArtitle = false;
  }

  // Método para obtener la cantidad de productos en el carrito
  public async getQuantityCarArtitle() {
    // Se obtiene los datos del localstorage del carrito de compra
    let localStorageCar = localStorage.getItem('car_shopping_artitles');
    // Se valida que la variable se encuentre en el localstorage
    let strItemsCar:string = localStorageCar !== null && localStorageCar !== undefined ?  localStorageCar : '';
    // Se verifica si hay articulos en el localstorage
    if (strItemsCar?.length === 0) {
      // Se coloca la cantidad como null
      this.quantityCarArtitle = null!;
    }else{
      // Se desencripta la cadena obtenida por el localstorage
      let decArtitlesSelected: string = await this._encService.desencriptar(strItemsCar);
      // Se transforma a un arreglo los datos guardados del localstorage
      let arrCarShopping: Array<ContentArtitle> = JSON.parse(decArtitlesSelected);

      // Se ingresa la cantidad a la variable global
      arrCarShopping.map( (element:ContentArtitle) => {
        this.quantityCarArtitle += element.content.length;
      });

      this.quantityCarArtitle = this.quantityCarArtitle > 0 ? this.quantityCarArtitle : null!;
    }
  }

  // Filtrar por nombre del Modelo
  public applyFilter(event: any) {
    const filterValue = (event.target as HTMLInputElement).value.toLowerCase();
    this.arrArtitles = this.arrArtitlesForFilter.filter( (item:ArtitleResponse) =>
      item.MODELO.toLowerCase().includes(filterValue));
  }

  // Abrir un Artículo
  public async openArtitle(artitle:ArtitleResponse){
    // Se transforma en string los datos del artículo
    const strIdArtitle:string = artitle.ID_DESC_ARTI;
    // Se encripta la información
    const encIdArtitle = await this._encService.encriptar(`${strIdArtitle}`);

    // Se transforma en string los datos del proveedor
    const strIdProvider:string = artitle.ID_PROVEEDOR;
    // Se encripta la información
    const encIdProveedor = await this._encService.encriptar(`${strIdProvider}`);

    // Redirigir a la ruta con el ID Encriptado
    this._router.navigate([ `sam/artitle-details/${encIdArtitle}/${encIdProveedor}` ]);
  }
}
