import { OfflineTicketingService } from './../../services/ticketing/offline-ticketing.service';
import { Component, ViewChild, OnInit, ViewChildren, QueryList, ElementRef, } from "@angular/core";
import { IonInfiniteScroll } from "@ionic/angular";
import { StorageService } from '../../services/storage.service';
import { TranslateService } from "@ngx-translate/core";
import { Platform } from "@ionic/angular";
import { ImageService } from "../../services/image.service";
import { UtilsService } from "../../services/utils.service";
import { Share } from '@capacitor/share';

declare let window: any;

@Component({
  selector: "app-tickets-list",
  templateUrl: "./tickets-list.page.html",
  styleUrls: ["./tickets-list.page.scss"],
})
export class TicketsListPage implements OnInit {
  @ViewChild(IonInfiniteScroll) infiniteScroll: IonInfiniteScroll;
  @ViewChildren("barCanvas") canvaslist: QueryList<ElementRef>;
  canvasElement: any;
  offset: number = 0;
  take: number = 10;
  tickets: any = [];
  emptySettingsSlide: any;
  type_segment: string = "presencial";
  symbolicTickets: any = [];
  emptySettingsSlideSimbolic: any;
  name_user: string = "";
  params: any;
  ticketParams: any;

  constructor(
    public translateService: TranslateService,
    private storage: StorageService,
    private imageService: ImageService,
    public platform: Platform,
    private utilsService: UtilsService,
    private offlineTicketingService: OfflineTicketingService
  ) {
  }

  ngOnInit() {
    this.emptySettingsSlide = {
      showImage: false,
      urlImage: "",
      showText: true,
      text: this.translateService.instant("NOT_TICKETS"),
    };
    this.emptySettingsSlideSimbolic = {
      showImage: false,
      urlImage: "",
      showText: true,
      text: this.translateService.instant("NOT_SIMBOLIC_TICKETS"),
    };
  }

  ionViewWillEnter() {
    this.loadInit(0, true);
  }

  loadInit(time = 0, loadNeeded = false) {
    if (!this.utilsService.loadingPage || loadNeeded) {
      this.utilsService.loadingPage = true;
      setTimeout(() => {
        return new Promise((resolve, reject) => {
          this.utilsService.presentLoading(this.translateService.instant("all.loading")).then(() => {
            Promise.all([
              this.offlineTicketingService.saveData(),
              this.storage.get("parameters").then((parameters) => {
                if (parameters) {
                  this.params = parameters;
                }
              }),
              this.offlineTicketingService.getTicketParameters().then(async (data) => {
                this.ticketParams = data;
              }),
              this.getTickets(),
              this.getSimbolicTickets(),
            ]).then(() => {
              this.utilsService.closeAllAlerts();
              this.utilsService.loadingPage = false;
              resolve(false);
            }).catch((error) => {
              this.utilsService.closeAllAlerts();
              this.utilsService.loadingPage = false;
              console.log('Error loadInit TicketsListPage', error);
              reject(error);
            });
          });
        });
      }, time);
    }
  }

  toggleInfiniteScroll() {
    this.infiniteScroll.disabled = !this.infiniteScroll.disabled;
  }

  getTickets(infiniteScroll?) {
    this.offlineTicketingService.getTickets().then(async (data) => {
      this.tickets = data;
      if (infiniteScroll) {
        infiniteScroll.target.complete();
        if (this.offset > this.tickets.length && !this.infiniteScroll.disabled)
          this.toggleInfiniteScroll();
      }
    });
  }

  loadData(infiniteScroll) {
    this.offset += 10;
    if (this.type_segment == "presencial") {
      this.getTickets(infiniteScroll);
    } else {
      this.getSimbolicTickets(infiniteScroll);
    }
  }

  segmentChanged(e) {
    this.offset = 0;
    this.type_segment = e.detail.value;
    this.tickets = [];
    this.symbolicTickets = [];
    if (this.type_segment == "presencial") {
      this.getTickets();
    } else {
      this.getSimbolicTickets();
    }
  }

  getSimbolicTickets(infiniteScroll?) {
    this.offlineTicketingService.getSymbolicTickets().then(async (data) => {
      this.symbolicTickets = data;
      this.getUserName();
      this.paintImageCanvas();
      if (infiniteScroll) {
        infiniteScroll.target.complete();
        if (this.offset > this.symbolicTickets.length && !this.infiniteScroll.disabled) {
          this.toggleInfiniteScroll();
        }
      }
    });
  }

  getUserName() {
    if (this.symbolicTickets && this.symbolicTickets.length) {
      let user =
        this.symbolicTickets[0].user.first_name +
        " " +
        this.symbolicTickets[0].user.last_name;
      if (user && user != "" && user.length && user.length > 17) {
        let array_user = user.split(" ");
        if (array_user.length > 3) {
          user = array_user[0] + " " + array_user[2];
        } else if (array_user.length == 3 || array_user.length == 2) {
          user = array_user[0] + " " + array_user[1];
        } else {
          user = array_user[0];
        }
      }
      this.name_user = user;
    }
  }

  paintImageCanvas() {
    setTimeout(() => {
      this.canvaslist.forEach((c) => {
        let ctx = c.nativeElement.getContext("2d");
        let background = new Image();
        background.crossOrigin = "*";
        let id = c.nativeElement.id;
        id = id.split("_")[1];
        let posTicket = this.symbolicTickets.find((item: any) => item.id == id);
        background.src = posTicket.path_image;
        background.onload = () => {
          ctx.drawImage(
            background,
            0,
            0,
            c.nativeElement.width,
            c.nativeElement.height
          );

          ctx.beginPath();
          ctx.fillStyle = "#666666";
          ctx.font = "11px arial";
          ctx.textAlign = "center";
          ctx.fillText(this.name_user, 50, 95);
          ctx.closePath();
        };
      });
    }, 500);

    this.canvaslist.changes.subscribe((c) => {
      // console.log(c);
    });
  }

  convertBlobToBase64 = (blob: Blob) =>
    new Promise((resolve, reject) => {
      const reader = new FileReader();
      reader.onerror = reject;
      reader.onload = () => {
        resolve(reader.result);
      };
      reader.readAsDataURL(blob);
    });

  async optionImage(canvasid: any, action: any) {
    let canvas = this.canvaslist.find(
      (imgid) => imgid.nativeElement.id == canvasid
    );
    let img = canvas.nativeElement.toDataURL();
    if (action == "share") {
      Share.share({ url: img });
    } else {
      await this.imageService.exportCanvasImage(canvas.nativeElement, this.translateService.instant("ticket_download"));
    }
  }

  b64toBlob(b64Data, contentType, sliceSize = null) {
    contentType = contentType || "";
    sliceSize = sliceSize || 512;

    var byteCharacters = atob(b64Data);
    var byteArrays = [];

    for (var offset = 0; offset < byteCharacters.length; offset += sliceSize) {
      var slice = byteCharacters.slice(offset, offset + sliceSize);

      var byteNumbers = new Array(slice.length);
      for (var i = 0; i < slice.length; i++) {
        byteNumbers[i] = slice.charCodeAt(i);
      }

      var byteArray = new Uint8Array(byteNumbers);

      byteArrays.push(byteArray);
    }

    var blob = new Blob(byteArrays, { type: contentType });
    return blob;
  }

  savebase64AsImageFile(folderpath, filename, content, contentType) {
    // Convert the base64 string in a Blob
    var DataBlob = this.b64toBlob(content, contentType);
    console.log("Starting to write the file :3");
    window.resolveLocalFileSystemURL(folderpath, (dir) => {
      console.log("Access to the directory granted succesfully");
      dir.getFile(filename, { create: true }, (file) => {
        console.log("File created succesfully.");
        file.createWriter(
          (fileWriter) => {
            console.log("Writing content to file");
            fileWriter.write(DataBlob);
          },
          () => {
            alert("Unable to save file in path " + folderpath);
          }
        );
      });
    });
  }

  doRefresh(event) {
    setTimeout(() => {
      this.loadInit(100, true);
      event.target.complete();
    }, 500);
  }
}