import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { lastValueFrom } from 'rxjs';
import { EncService } from 'src/app/services/enc/enc.service';
import { GenericService } from 'src/app/services/generic/generic.service';
import { GETBMEService } from 'src/app/services/getb/getbme/getbme.service';
import { ResponseData } from 'src/app/services/validations.service';

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

  public arr_menu: Array<OneMenuResponse> = [];
  public leng_menu: number = 0;
  public card_size: string = "50%";
  public component_size: string = "50%";
  public menu_align: string = "menu-align";

  private small_screen: number = 700;

  constructor(
    private _getbmeService: GETBMEService,
    private _genericService: GenericService
  ) { }

  async ngOnInit() {

    await this.getOneMenu();
    if (window.innerWidth > this.small_screen) {
      if (this.leng_menu >= 4) {

        if (window.innerWidth < 1500 && window.innerWidth > 1040) {
          this.component_size = "33%"
        } else if (window.innerWidth < 1040) {
          this.component_size = "50%"
          this.card_size = "200px";
        } else {
          this.component_size = "25%"
          this.card_size = "80%";
        }

      } else if (this.leng_menu > 2) {
        if (window.innerWidth < 1040) {
          this.component_size = "50%"
          this.card_size = "80%";
        } else {
          this.component_size = "33%"
          this.card_size = "80%";
        }
      } else if (this.leng_menu <= 2) {
        if (window.innerWidth > 1040) {
          this.component_size = "50%"
          this.card_size = "50%";
        } else {
          this.component_size = "50%"
          this.card_size = "80%";
        }
      }
      this.menu_align = "menu-align";
    } else if (window.innerWidth <= this.small_screen) {
      this.component_size = "100%"
      this.card_size = "80%";
      this.menu_align = "menu-align-small";
    }
  }

  private async getOneMenu() {
    await lastValueFrom(this._genericService.generateMenu('ADQUI')).then(
      (data: ResponseData) => {
        if (!data.error) {
          this.arr_menu = data.response;
          this.leng_menu = data.response.length;
        }
      }, error => console.log(error)
    )
  }

  public onResize(event: any) {
    if (event.target.innerWidth > this.small_screen) {
      if (this.leng_menu >= 4) {

        if (event.target.innerWidth < 1500 && event.target.innerWidth > 1040) {
          this.component_size = "33%"
        } else if (event.target.innerWidth < 1040) {
          this.component_size = "50%"
          this.card_size = "80%";
        } else {
          this.component_size = "25%"
          this.card_size = "80%";
        }

      } else if (this.leng_menu > 2) {
        if (event.target.innerWidth < 1040) {
          this.component_size = "50%"
          this.card_size = "80%";
        } else {
          this.component_size = "33%"
          this.card_size = "80%";
        }
      } else if (this.leng_menu <= 2) {
        if (window.innerWidth > 1040) {
          this.component_size = "50%"
          this.card_size = "50%";
        } else {
          this.component_size = "50%"
          this.card_size = "80%";
        }
      }
      this.menu_align = "menu-align";
    } else if (event.target.innerWidth <= this.small_screen) {
      this.component_size = "100%"
      this.card_size = "80%";
      this.menu_align = "menu-align-small";
    }


  }
}

export interface OneMenuResponse {
  CODIGO_MENU: number;
  NOMBRE_MENU: string;
  IMG_MENU: string;
  DATA_FORM: string;
}
