import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { MatBottomSheet } from '@angular/material/bottom-sheet';
import { ExitComponent } from 'src/app/components/exit/exit.component';
import { CookiesService } from 'src/app/services/cookies.service';
import { MessageService } from 'primeng/api';
import { MessagingService } from 'src/app/services/messaging.service';
import { AuthService } from 'src/app/services/auth.service';
import { format } from 'src/app/utils';

const levelDescriptionsTable = [
  [
    'Поднимай свой уровень! Купи еще на <span style="color: var(--button-color);">{0}₽</span> и твой кешбек будет <span style="color: var(--button-color);">6%</span> с {1}!',
    'А ты хорош! Купи еще на <span style="color: var(--button-color);">{0}₽</span> и получай кешбек <span style="color: var(--button-color);">10%</span> с {1}',
    'Ты крут! Купи еще на <span style="color: var(--button-color);">{0}₽</span> и получай максимальный кешбек <span style="color: var(--button-color);">15%</span> с {1}',
    'Ты сделал это! Купи на <span style="color: var(--button-color);">{0}₽</span> и сохраняй максимальный кешбек <span style="color: var(--button-color);">15%</span> с  {1}',
  ],
  [
    'Oops! Ты оказался на 1 уровне. Купи еще на <span style="color: var(--button-color);">{0}₽</span> и твой кешбек будет <span style="color: var(--button-color);">6%</span> с {1}!',
    'Ты можешь стать круче! Купи еще на <span style="color: var(--button-color);">{0}₽</span> и получай кешбек <span style="color: var(--button-color);">10%</span> с {1}',
    'Ого! Ты уже здесь! Хочешь еще больше кешбека? Купи на <span style="color: var(--button-color);">{0}₽</span> и получай максимальный кешбек <span style="color: var(--button-color);">15%</span> с {1}',
    'Ты потрясающий! Покупай на <span style="color: var(--button-color);">{0}₽</span> и сохраняй максимальный кешбек <span style="color: var(--button-color);">15%</span> с {1}',
  ],
  [
    'Oops! Ты оказался на 1 уровне. Купи еще на <span style="color: var(--button-color);">{0}₽</span> и твой кешбек будет <span style="color: var(--button-color);">6%</span> с {1}!',
    'Ты вернулся на 2 уровень. Купи еще на <span style="color: var(--button-color);">{0}₽</span> и получай кешбек <span style="color: var(--button-color);">10%</span> с {1}',
    'Ты почти на последнем уровне! Купи на <span style="color: var(--button-color);">{0}₽</span> и получай максимальный кешбек <span style="color: var(--button-color);">15%</span> с {1}',
    'Ты лучший! Покупай на <span style="color: var(--button-color);">{0}₽</span> и сохраняй максимальный кешбек <span style="color: var(--button-color);">15%</span> с {1}',
  ],
  [
    'Oops! Ты оказался на 1 уровне. Купи еще на <span style="color: var(--button-color);">{0}₽</span> и твой кешбек будет <span style="color: var(--button-color);">6%</span> с {1}!',
    'Ты вернулся на 2 уровень. Купи еще на <span style="color: var(--button-color);">{0}₽</span> и получай кешбек <span style="color: var(--button-color);">10%</span> с {1}',
    'Оу! Ты оказался на 3 уровне. Купи на <span style="color: var(--button-color);">{0}₽</span> и возвращай себе максимальный кешбек <span style="color: var(--button-color);">15%</span> с {1}',
    'Ты наш герой! Покупай на <span style="color: var(--button-color);">{0}₽</span> и сохраняй максимальный кешбек <span style="color: var(--button-color);">15%</span> с {1}',
  ],
];

@Component({
  selector: 'app-guest-card',
  templateUrl: './guest-card.component.html',
  styleUrls: ['./guest-card.component.scss'],
})
export class GuestCardComponent implements OnInit {
  public qrCodeSize: number = 85;
  private isQrCodeClicked: boolean = false;
  public Math: Math = Math;
  public phone?: string;

  constructor(
    private _bottomSheet: MatBottomSheet,
    public cookiesService: CookiesService,
    private messagingService: MessagingService,
    private messageService: MessageService,
    public authService: AuthService
  ) {}

  ngOnInit(): void {
    this.phone =
      this.cookiesService.getItem('phone-number') ||
      this.authService.userInfo?.phone;

    this.requestPermission();
  }

  requestPermission() {
    const userAgent = window.navigator.userAgent.toLowerCase();
    const ios = /iphone|ipod|ipad/.test(userAgent);
    if (ios) {
      this.messageService.clear();
      this.messageService.add({
        severity: 'custom',
        summary: `Чтобы получать уведомления, добавьте карту в Apple Wallet`,
        life: 5000,
      });

      // var permissionData = window.safari.pushNotification.permission('web.com.example.domain');
      // $scope.checkRemotePermission(permissionData);
    } else {
      //FIREBASE HERE
      this.messagingService.requestPermission();
      // this.message = this.messagingService.currentMessage;
    }
  }

  qrCodeClick() {
    this.isQrCodeClicked = !this.isQrCodeClicked;
    this.qrCodeSize = this.isQrCodeClicked ? 180 : 85;
  }

  deleteToken(): void {
    this.cookiesService.logout();
  }

  logout = () => {
    const bottomSheet = this._bottomSheet.open(ExitComponent);
    bottomSheet.afterDismissed().subscribe({
      next: (val) => {
        if (val) {
          this.authService.logout();
        }
      },
    });
  };

  getLevelDescription() {
    let curLevel = 0;
    let nextLevel = 0;

    if (this.authService.userInfo) {
      curLevel =
        this.authService.userInfo.current_level_and_cashback.current_level - 1;
      nextLevel = this.authService.userInfo.next_level.next_level - 1;
    }

    const template = levelDescriptionsTable[curLevel][nextLevel];

    return format(
      template,
      `${this.authService.userInfo?.next_level.sum_for_next_level}`,
      `${this.authService.currentPeriod[1].locale('ru').format('D MMMM')}`
    );
  }
}