import { Component, OnInit } from "@angular/core";
import { IonItemSliding, AlertController } from "@ionic/angular";
import { StorageService } from '../../services/storage.service';
import { TranslateService } from "@ngx-translate/core";
import { Router } from "@angular/router";
import { UserService } from "../../services/user.service";
import { UtilsService } from "../../services/utils.service";

@Component({
  selector: "page-cards",
  templateUrl: "cards.html",
  styleUrls: ["./cards.scss"],
})
export class CardsPage implements OnInit {
  creditCardUser: any = [];
  constructor(
    private storage: StorageService,
    public userProvider: UserService,
    public alertCtrl: AlertController,
    private utilsService: UtilsService,
    private translateService: TranslateService,
    private router: Router
  ) {}

  ngOnInit() {
  }

  ionViewDidLoad() {}

  ionViewWillEnter() {
    this.listCreditCard();
  }

  addNewCard() {
    this.router.navigate(["/app/tabs/settings/card-add"]);
  }

  listCreditCard() {
    this.storage.get("token").then(async (token) => {
      if (token) {
        this.utilsService.presentLoading(this.translateService.instant("all.loading"));
        (await this.userProvider.listCreditCard(token.access_token)).subscribe(
          (resp) => {
            this.utilsService.dismissLoading();
            this.creditCardUser = resp;
          },
          (error) => {
            this.utilsService.dismissLoading();
          }
        );
      }
    });
  }

  deleteCreditCard(slidingItem: IonItemSliding, id) {
    this.storage.get("token").then(async (token) => {
      if (token) {
        this.utilsService.presentLoading(this.translateService.instant("all.loading"));
        (await this.userProvider.deleteCreditCard(id, token.access_token)).subscribe(
          (resp) => {
            slidingItem.close();
            this.utilsService.dismissLoading();
            this.listCreditCard();
          },
          (error) => {
            this.utilsService.dismissLoading();
          }
        );
      }
    });
  }

  selectDefaultCard(id) {
    this.storage.get("token").then((token) => {
      if (token) {
        this.utilsService.presentLoading(this.translateService.instant("all.loading"));
        this.userProvider.selectDefaultCard(id, token.access_token).subscribe(
          (resp) => {
            this.utilsService.dismissLoading();
            this.listCreditCard();
          },
          (error) => {
            this.utilsService.dismissLoading();
          }
        );
      }
    });
  }

  verifyCard(id) {
    this.storage.get("token").then((token) => {
      if (token) {
        this.utilsService.presentLoading(this.translateService.instant("all.loading"));
        this.userProvider.generateVerifyCard(id, token.access_token).subscribe(
          (resp) => {
            this.utilsService.dismissLoading();
            if (resp["r"] && resp["b"].transactionResponse.state == "APPROVED") {
              this.nextProcessVerifyCardAPPROVED(resp, token, id);
            } else {
              this.nextProcessVerifyCard_OTHER_STATE(resp);
            }
          },
          (error) => {
            console.log("error listCreditCard", error);
            this.utilsService.dismissLoading();
          }
        );
      }
    });
  }

  async nextProcessVerifyCard_OTHER_STATE(resp) {
    const prompt = await this.alertCtrl.create({
      header: "Verificación",
      message: resp["m"],
      buttons: [
        {
          text: "Cancelar",
          handler: (data) => {
            console.log("Cancel clicked");
          },
        },
      ],
    });
    await prompt.present();
  }

  async nextProcessVerifyCardAPPROVED(resp, token, id) {
    const prompt = await this.alertCtrl.create({
      header: "Verificación",
      message: resp["m"],
      inputs: [
        {
          name: "value",
          placeholder: "Valor cobrado",
        },
      ],
      buttons: [
        {
          text: "Cancelar",
          handler: (data) => {
            console.log("Cancel clicked");
          },
        },
        {
          text: "Enviar",
          handler: (data) => {
            this.utilsService.presentLoading(this.translateService.instant("all.loading"));
            this.userProvider.sendValueVerifyCard(id, data.value, token.access_token).subscribe(
              (result) => {
                this.utilsService.dismissLoading();
                this.utilsService.presentToast(3000, "success", "top", result["m"]);
                if (result["r"]) {
                  this.listCreditCard();
                }
              },
              (error) => {
                console.log("error sendValueVerifyCard: ", error);
                this.utilsService.dismissLoading();
              }
            );
          },
        },
      ],
    });
    prompt.present();
  }
}