import { Injectable } from "@angular/core";
import { TranslateService } from "@ngx-translate/core";

import { saveAs } from 'file-saver';
import { Dialog } from '@capacitor/dialog';
import * as htmlToImage from 'html-to-image';
import { UtilsService } from "../services/utils.service";
import { Capacitor } from '@capacitor/core';
import { Filesystem, Directory, Encoding } from '@capacitor/filesystem';
import { Share } from '@capacitor/share';

@Injectable({
  providedIn: "root",
})
export class ImageService {
  hasWriteAccess: boolean;

  constructor(
    private translateService: TranslateService,
    public utilsService: UtilsService,
  ) { }

  async exportCanvasImage(canvasElement, message) {
    this.utilsService.presentLoading(this.translateService.instant("all.loading"));
    let utilsService = this.utilsService;
    htmlToImage.toBlob(canvasElement, {cacheBust: true}).then(function (blob) {
      let fileName = "SportsCrowd_" + new Date().getTime() + ".png";
      
      if (Capacitor.isNativePlatform()) {
        let dataForDownload: any;
        const reader = new FileReader();
        reader.readAsDataURL(blob);
        reader.onloadend = async () => {
          dataForDownload = reader.result;
  
          try {
            const directory = Capacitor.getPlatform() === 'ios' ? Directory.Documents : Directory.ExternalStorage;
            await Filesystem.requestPermissions();
            await Filesystem.appendFile({
              path: `Download/${fileName}`,
              data: dataForDownload,
              directory: directory
            });
            const finalPhotoUri = await Filesystem.getUri({
              directory: directory,
              path: `Download/${fileName}`
            });
  
            if (Capacitor.getPlatform() === 'ios') {
              Share.share({
                title: fileName,
                url: finalPhotoUri.uri
              })
                .then(() => {
                  this.toastr.toastSuccess(
                    'File has been downloaded'
                  );
                })
                .catch(e => {
                  this.toastr.toastError(
                    'An error occurred during the download'
                  );
                });
            } else {
              if (finalPhotoUri.uri !== '') {
                this.toastr.toastSuccess(
                  'File has been downloaded to the Download folder'
                );
              }
            }
          } catch (e) {
            this.toastr.toastError(
              'An error occurred during the download'
            );
          }
        };
      }else{
        saveAs(blob, fileName);
      }
      utilsService.presentToast(3000, "success", "top", message);
      utilsService.dismissLoading();
    });
  }

  b64toBlob(b64Data, contentType) {
    contentType = contentType || "";
    var 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;
  }

  private async showModal(message: string) {

    Dialog.alert({
      title: this.translateService.instant(message),
      message: this.translateService.instant("image_download"),
    });
  }
}