import { Component, OnInit } from "@angular/core";
import { TranslateService } from "@ngx-translate/core";
import { AlertController, ModalController, IonRouterOutlet, ActionSheetController, NavController } from "@ionic/angular";
import { StorageService } from '../../services/storage.service';
import { ActivatedRoute } from "@angular/router";
import { OrderService } from "../../services/order.service";
import { CityService } from "../../services/city.service";
import { PusherService } from "../../services/pusher.service";
import { UtilsService } from "../../services/utils.service";
import { DiscountDetailPage } from "../discount-detail/discount-detail";
import { OrderRatingPage } from "../order-rating/order-rating";
import { Browser } from '@capacitor/browser';

@Component({
  selector: "page-order",
  templateUrl: "order.html",
  styleUrls: ["./order.scss"],
})
export class OrderPage implements OnInit {
  orderSegment: string = "";
  orderDetail: any;
  order_id: any;
  listProducts: any = [];
  origin: any;
  messageText: any;
  orderChannel: any;
  constructor(
    public modalCtrl: ModalController,
    public orderProvider: OrderService,
    private translateService: TranslateService,
    private storage: StorageService,
    public alertCtrl: AlertController,
    public cityProvider: CityService,
    private pusherProvider: PusherService,
    private utilsService: UtilsService,
    public route: ActivatedRoute,
    private routerOutlet: IonRouterOutlet,
    public actionSheetController: ActionSheetController,
    public navCtrl: NavController
  ) {
    this.orderSegment = "statusOrder";
    this.translateService.get(["TEXT1_WHATSAPP_ORDER", "TEXT2_WHATSAPP_ORDER"]).subscribe((values) => {
      this.messageText = {
        textWhatsapp1: values.TEXT1_WHATSAPP_ORDER,
        textWhatsapp2: values.TEXT2_WHATSAPP_ORDER,
      };
    });
  }

  ngOnInit() {
    this.origin = this.route.snapshot.paramMap.get("origin");
    this.order_id = this.route.snapshot.paramMap.get("order_id");
    this.pusherProvider.connectOrderState();
  }

  ionViewWillEnter() {
    this.detailOrder();
    setTimeout(() => {
      this.orderChannel = this.pusherProvider.getOrderChannel();
      this.orderChannel.bind("order-state-" + this.order_id, (data) => {
        if (this.orderDetail.id == data.orderId) {
          this.detailOrder();
        }
      });
    }, 2);
  }

  ionViewWillLeave() {
    this.pusherProvider.disconnectOrderState();
  }

  detailOrder() {
    this.orderDetail = null;
    this.listProducts = [];
    if (this.origin == "confirmOrder") {
      this.orderProvider.getPendingOrders();
      // this.checkPayment(this.orderDetail);
    }
    this.storage.get("token").then(async (token) => {
      if (token) {
        this.utilsService.presentLoading(this.translateService.instant("all.loading"));
        (await this.orderProvider.pendingOrderDetail(this.order_id, token.access_token)).subscribe(
          (resp) => {
            this.utilsService.dismissLoading();
            if (resp["status"] == "success") {
              this.orderDetail = resp["order"];
              this.orderDetail.products.forEach((product, index) => {
                let current = product.products;
                current.available = this.orderDetail.products[index].available;
                current.priceAfterDiscount = 0;
                current.price = this.orderDetail.products[index].price;
                if (this.orderDetail.products[index].percentage_discount) {
                  current.priceAfterDiscount =
                    this.orderDetail.products[index].price_bruto -
                    (this.orderDetail.products[index].price_bruto * this.orderDetail.products[index].percentage_discount) / 100;
                  current.price = this.orderDetail.products[index].price_bruto;
                }
                current.priceAfterFlash = 0;
                if (this.orderDetail.products[index].flash_price) {
                  current.priceAfterFlash = this.orderDetail.products[index].flash_price;
                  current.price = this.orderDetail.products[index].price_bruto;
                }
                current.priceAfterSpecialPriceTag = 0;
                if (this.orderDetail.products[index].special_price) {
                  current.priceAfterSpecialPriceTag = this.orderDetail.products[index].special_price;
                  current.price = this.orderDetail.products[index].price_bruto;
                }

                if (product.order_product_attributes && product.order_product_attributes.length) {
                  current.order_product_attributes = product.order_product_attributes;
                } else {
                  current.order_product_attributes = [];
                }
                current.quantity = this.orderDetail.products[index].quantity;
                current.comments = this.orderDetail.products[index].comments;

                this.listProducts.push(current);
              });
              // this.checkPayment(this.orderDetail);
            }
          },
          (error) => {
            console.log("error generateOrder", error);
            this.utilsService.dismissLoading();
          }
        );
      }
    });
  }

  // checkPayment(order){
  //   if(order.payment_type_id == 4 && order.gw_state == 'PENDING'){
  //     // Informar pago pendiente.
  //     let alert = this.alertCtrl.create({
  //       title: 'Realizar Pago',
  //       message: 'Deseas realizar el pago ?',
  //       buttons: [
  //         {
  //           text: 'No',
  //           role: 'cancel',
  //           handler: () => {
  //             this.navCtrl.pop();
  //           }
  //         },
  //         {
  //           text: 'Pagar',
  //           handler: () => {
  //             this.handlePayment(order);
  //           }
  //         }
  //       ]
  //     });
  //     alert.present();
  //   }
  // }
  //
  // handlePayment(order){
  //   this.gateway.goToGateway(order);
  // }

  async orderQualify(order_id) {
    const modal = await this.modalCtrl.create({
      component: OrderRatingPage,
      swipeToClose: true,
      presentingElement: this.routerOutlet.nativeEl,
      componentProps: { order_id },
    });
    await modal.present();
  }

  openWhatsapp(deliverPhone, codeOrder) {
    if (deliverPhone && codeOrder) {
      let editPhone = "57" + deliverPhone;
      let textWhatsapp = "&text=" + this.messageText.textWhatsapp1 + codeOrder + this.messageText.textWhatsapp2;
      let url = "https://api.whatsapp.com/send?phone=" + editPhone + textWhatsapp;

      Browser.open({ url: url });
    }
  }

  doRefresh(event, order_state) {
    if (order_state <= 5) {
      this.detailOrder();
      setTimeout(() => {
        event.target.complete();
      }, 1000);
    } else {
      event.target.complete();
    }
  }

  async infoDiscount(typeDiscount) {
    const modal = await this.modalCtrl.create({
      component: DiscountDetailPage,
      swipeToClose: true,
      presentingElement: this.routerOutlet.nativeEl,
      componentProps: { orderDetail: this.orderDetail, typeDiscount },
    });
    await modal.present();
  }

  changedSubcategory(e) {
    if (e.detail.value) {
      this.orderSegment = e.detail.value;
    }
  }

  async openActionSheet(order_id) {
    const actionSheet = await this.actionSheetController.create({
      header: "Opciones",
      cssClass: "my-custom-class",
      buttons: [
        {
          text: "Cancelar Pedido",
          role: "destructive",
          icon: "ban-outline",
          handler: () => {
            this.storage.get("token").then(async (token) => {
              if (token) {
                this.utilsService.presentLoading(this.translateService.instant("all.loading"));
                (await this.orderProvider.cancelOrder(this.order_id, token.access_token)).subscribe(
                  (resp) => {
                    this.utilsService.dismissLoading();
                    console.log("resp: ", resp);
                    if (!resp["r"]) {
                      this.utilsService.presentToast(5000, "warning", "top", resp["m"]);
                    } else {
                      this.navCtrl.back();
                    }
                  },
                  (error) => {
                    this.utilsService.dismissLoading();
                    console.log(error);
                  }
                );
              }
            });
          },
        },
        {
          text: "Cerrar",
          icon: "close",
          role: "cancel",
          handler: () => {
            console.log("Cancel clicked");
          },
        },
      ],
    });
    await actionSheet.present();
  }
}