import { Component, ViewChild, OnInit, ViewChildren, QueryList, ElementRef } from "@angular/core";
import { IonInfiniteScroll, NavController } from "@ionic/angular";
import { UserService } from "../../services/user.service";
import { StorageService } from '../../services/storage.service';
import { CityService } from "../../services/city.service";
import { TranslateService } from "@ngx-translate/core";
import QRCode from 'qrcode';

import { FileSharer } from '@byteowls/capacitor-filesharer';

declare let window: any;

@Component({
  selector: 'app-user-cards',
  templateUrl: './user-cards.page.html',
  styleUrls: ['./user-cards.page.scss'],
})
export class UserCardsPage implements OnInit {
  @ViewChildren("barCanvas") canvaslist: QueryList<ElementRef>;
  canvasElement: any;

  @ViewChild(IonInfiniteScroll) infiniteScroll: IonInfiniteScroll;
  offset: number = 0;
  take: number = 10;
  userCards: any;
  emptySettingsSlide: any;
  userInfo: any;

  constructor(
    public userProvider: UserService,
    private storage: StorageService,
    public cityProvider: CityService,
    public translateService: TranslateService,
    public navCtrl: NavController
  ) { }

  ngOnInit() {
    this.emptySettingsSlide = {
      showImage: false,
      urlImage: "",
      showText: true,
      text: this.translateService.instant("NOT_USER_CARDS"),
    };
    this.storage.get("infoUser").then((userInfo) => {
      this.userInfo = userInfo;
    });
    this.getUserCards();
  }

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

  async getUserCards(infiniteScroll?) {

    (await this.userProvider.getUserCards(this.take, this.offset, 'subscriber')).subscribe(
      (resp: any) => {
        if (!this.userCards) {
          this.userCards = [];
        }
        this.userCards.push(...resp);
        this.paintImageCanvas();
        if (infiniteScroll) {
          infiniteScroll.target.complete();
          if (this.offset > this.userCards.length && !this.infiniteScroll.disabled) {
            this.toggleInfiniteScroll();
          }
        }
      },
      (error) => {
        this.userCards = null;
        console.log("error getUserCards: ", error);
      }
    );
  }

  loadData(infiniteScroll) {
    this.offset += 10;
    this.getUserCards(infiniteScroll);
  }

  paintImageCanvas() {
    setTimeout(() => {
      this.canvaslist.forEach(async (c) => {
        let ctx = c.nativeElement.getContext("2d");
        c.nativeElement.width = 600;
        let background = new Image();
        background.crossOrigin = "*";
        let id = c.nativeElement.id;
        id = id.slice(9);    // Toma el valor del item.identification
        let posTicket = this.userCards.find((item: any) => item.identification == id);
        let user = this.userInfo['first_name'] + ' ' + this.userInfo['last_name'];
        let document = this.userInfo['document'];
        let documentType = this.userInfo['document_type'] ? this.userInfo['document_type']['alias'] : '';
        let cardName = posTicket['name'];
        let optionalField = posTicket['optional'] ? posTicket['optional'] : '';
        let font_type = posTicket['font_type'];
        let font_color = posTicket['font_color'];

        let identification = (documentType ? (documentType + ': ' + document) : document).toUpperCase();
        user = user.toUpperCase();
        cardName = cardName.toUpperCase();
        optionalField = optionalField.toUpperCase();
        var qrData: any;
        if (posTicket['optionalSeat']) {
          qrData = {
            'u': this.userInfo['id'],
            'c': posTicket['id'],
            's': posTicket['optionalSeat']
          };
        } else {
          qrData = {
            'u': this.userInfo['id'],
            'c': posTicket['id']
          };
        }

        let qr = new Image();
        qr.src = String(await this.generateQR(JSON.stringify(qrData)));

        background.onload = () => {
          c.nativeElement.height = c.nativeElement.width * (background.height / background.width);
          ctx.drawImage(background, 0, 0, c.nativeElement.width, c.nativeElement.height);

          ctx.beginPath();
          if (!font_color) {
            ctx.fillStyle = 'white';
          } else {
            ctx.fillStyle = font_color;
          }
          if (!font_type) {
            ctx.font = "bold 28px Arial black";
          } else {
            let font = 'bold 26px ' + font_type;
            ctx.font = font;
          }
          ctx.textAlign = 'left';
          ctx.fillText(user.length > 23 ? user.substring(0, 22) + '...' : user, 20, 215);
          if (!font_type) {
            ctx.font = 'bold 22px Arial';
          } else {
            let cardNameFont = '22px ' + font_type;
            ctx.font = cardNameFont;
          }
          ctx.fillText(cardName.length > 30 ? cardName.substring(0, 29) + '...' : cardName, 20, 240);
          ctx.fillText(identification, c.nativeElement.width / 4, 265);
          if (optionalField) ctx.fillText(optionalField.length > 30 ? optionalField.substring(0, 29) + '...' : optionalField, c.nativeElement.width / 4, 290);
          if (!font_color) {
            ctx.fillStyle = '#edd549';
          } else {
            ctx.fillStyle = font_color;
          }
          ctx.fillText('> ', (c.nativeElement.width / 4) - 20, 265);
          if (optionalField) ctx.fillText('✔ ', (c.nativeElement.width / 4) - 20, 290);
          ctx.drawImage(qr, c.nativeElement.width - 130, c.nativeElement.height - 200, 110, 110);
          ctx.closePath();
        };
        background.src = (await this.cityProvider.getGalleryUrl()) + 'carnet/' + posTicket['image'];
      });
    }, 500);
  }

  generateQR(code) {
    return new Promise((resolve, reject) => {
      const qrcode = QRCode;
      var opts = {
        errorCorrectionLevel: 'H',
        quality: 1,
        margin: 2,
      }
      qrcode.toDataURL(code, opts, function (err, url) {
        resolve(url);
      })
    });

  }

  optionImage(canvasid: any, action: any) {
    if (action == "share") {
      let canvas = this.canvaslist.find((imgid) => imgid.nativeElement.id == canvasid);
      let img = canvas.nativeElement.toDataURL();

      let contentType = img.split("/")[1].split(';')[0];
      let shortImg = img.split(",")[1];

      FileSharer.share({
        filename: (new Date().getTime()) + '.' + contentType,
        contentType: "application/" + contentType,
        base64Data: shortImg,
      }).then(() => {
      }).catch(error => {
        console.error("File sharing failed", error.message);
      });
    } else {
      window.canvas2ImagePlugin.saveImageDataToLibrary(
        function (msg) {
          console.log(msg);
        },
        function (err) {
          console.log(err);
        },
        document.getElementById(canvasid)
      );
    }
  }

}