import { Injectable } from '@angular/core';
import { AnimationController, ModalController, ToastController } from '@ionic/angular';
import { BadRequestPage } from '../shared/popover/bad-request/bad-request.page';
import { SuccessMessagePage } from '../shared/popover/success-message/success-message.page';

@Injectable({
  providedIn: 'root'
})
export class ToastService {

  constructor(
    public toastController: ToastController,
    private animationController: AnimationController,
    private modalController: ModalController,
    ) { }

  ngOnInit() {
    
  }

  async presentToast(infoMessage: string) {
    const toast = await this.toastController.create({
      message: infoMessage,
      duration: 2000
    });
    toast.present();
  }

  async successMessage(message?: any, callback?) {
    
    let notification = document.createElement('div')
    notification.className = 'notification'
    notification.innerHTML = `

    <div class="main-content width-100 pa-20">
      <p class="message d-flex align-center success">
        <ion-icon slot="end" class="title-icon pr-10" src="/assets/images/nofitication-success.svg"></ion-icon>
        <p class="text">{{ message }}</p>
      </p>
      
    </div>
    `

    document.body.append(notification)
    notification.querySelector('.text').innerHTML =  message || 'Processo efetuado'
    setTimeout(()=>{
      if (callback) {
        callback()
      }

      notification.style.right = "-100%"

      setTimeout(()=>{
        notification.remove()
      },1000)

    },6000)
    
  }

  async badRequest(message?: string, callback?) {

    let notification = document.createElement('div')
    notification.className = 'notification'
    notification.innerHTML = `

    <div class="main-content width-100 pa-20">
      <p class="message d-flex align-center faild">
      <ion-icon slot="end" class="title-icon pr-10" src="/assets/images/notification-error.svg"></ion-icon>
        <p class="text">{{ message }}</p>
      </p>
      
    </div>
    `

    notification.style.animationName = 'notification-top'

    document.body.append(notification)
    notification.querySelector('.text').innerHTML =  message || 'Processo não efetuado'
    setTimeout(()=>{
      if (callback) {
        callback()
      }

      notification.style.right = "-100%"

      setTimeout(()=>{
        notification.remove()
      },1000)

    },6000)

  }

  
  async notificationMessage(message?: any, callback?: any,data?: any) {
    
    let notification = document.createElement('div')
    notification.className = 'notificationPush'
    notification.innerHTML = `

    <div class="main-content width-100 pa-20">
      <p class="message d-flex align-left">
        <p class="text">{{ message }}</p>
      </p>
      
    </div>
    `

    let funcx  = ()=>{
      callback(data);
      document.body.removeEventListener('click', funcx);
      notification.remove();
    }

    document.body.append(notification)
    document.body.addEventListener('click', funcx);

    notification.querySelector('.text').innerHTML =  message || 'Processo efetuado'
    setTimeout(()=>{

      notification.style.top = "-100%"

      setTimeout(()=>{
        notification.remove()
      },1000)

    },6000)
    
  }


  loading() : HTMLDivElement {
    let loader: HTMLDivElement = document.createElement('div')
    loader.innerHTML = `

    <div class="loading-blocker">
      <div class="loading-blocker-container">
      <img src="/assets/images/Blocks-loader.gif" />
      </div>
    </div>
    `

    document.body.append(loader)

    loader.addEventListener('click', ()=>{
      // loader.remove()
    })
    return loader
    
  }

}