import { Component, HostListener, OnDestroy, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { AppShellService } from '@core/services/app-shell.service';
import { AuthService } from '@core/services/auth.service';
import { BannerService } from '@core/services/banner.service';
import { PortalDeterminationService } from '@core/services/portal-determination.service';
import { SessionKeepAliveService } from '@core/services/session-keep-alive.service';
import { SSOService } from '@core/services/sso.service';
import { TokenTimeoutService } from '@core/services/token/token-timeout.service';
import { TokenService } from '@core/services/token/token.service';
import { BrandingColors } from '@core/typings/branding.typing';
import { environment } from '@environment';
import { ClientSettingsService } from '@features/client-settings/client-settings.service';
import { SupportService } from '@features/support/support.service';
import { UserService } from '@features/users/user.service';
import { SidebarLink, SupportLink } from '@yourcause/common';
import { filter, Subscription, tap } from 'rxjs';
import { Applicant } from '../../typings/applicant.typing';

@Component({
  selector: 'gc-wrapper-applicant',
  templateUrl: './gc-wrapper-applicant.component.html',
  styleUrls: ['./gc-wrapper-applicant.component.scss']
})
export class GcWrapperApplicantComponent implements OnInit, OnDestroy {
  loggedIn: boolean;
  sub = new Subscription();
  applicant: Applicant;
  showAboutModal = false;
  version = environment.version;
  mobileMenuOpen = false;
  termsOfServiceLink = this.authService.termsOfServiceLink;
  privacyPolicyLink = this.authService.privacyPolicyLink;
  timeRemaining$ = this.timeoutService.timeRemaining$.pipe(
    tap(time => {
      if (time <= 0) {
        this.onSignOutClick();
      }
    }), filter(time => time <= this.timeoutService.timeoutStart));
  showTimeout$ = this.timeoutService.timeoutStart$;
  supportLinks$ = this.appShellService.changesTo$('supportLinks');
  liveChatAvailable = false;
  links: SidebarLink[] = [
    {
      label: 'My account',
      icon: '',
      i18nKey: 'common:hdrMyAccount',
      action: () => {
        this.router.navigate(['/apply/my-account']);
      },
      sequence: '1.1'
    },
    {
      label: 'Log out',
      icon: '',
      i18nKey: 'common:linkLogOut',
      action: () => {
        this.onSignOutClick();
      },
      sequence: '1.2'
    }
  ];
  showAwardsLink = false;
  branding: BrandingColors;

  @HostListener('document:click', ['$event'])
  clickout (event: any) {
    if (
      event.target.className !== 'mobile-menu' &&
      event.target.className !== 'fa fa-bars'  &&
      this.mobileMenuOpen === true
    ) {
      this.mobileMenuOpen = false;
    }
  }

  constructor (
    private appShellService: AppShellService,
    private sessionKeepAliveService: SessionKeepAliveService,
    private timeoutService: TokenTimeoutService,
    private tokenService: TokenService,
    private ssoService: SSOService,
    private router: Router,
    private portal: PortalDeterminationService,
    private userService: UserService,
    private bannerService: BannerService,
    private supportService: SupportService,
    private authService: AuthService,
    private clientSettingsService: ClientSettingsService
  ) {
    this.sub.add(
      this.clientSettingsService.changesTo$('clientBranding').subscribe(() => {
        this.branding = this.clientSettingsService.get('clientBranding') ||
          this.clientSettingsService.defaultBranding;
      })
    );
  }

  get banners () {
    return this.bannerService.banners;
  }

  async ngOnInit () {
    const prefix = this.portal.getCurrentPrefix();
    if (prefix) {
      await this.ssoService.getSSOConfigurationBySubDomain(prefix);
    }
    this.sub.add(
      this.userService.changesTo$('applicant')
      .subscribe((applicant: Applicant) => {
        this.applicant = applicant;
        this.bannerService.setApplicantPortalBanners(this.applicant?.passwordExpirationDate);
        this.showAwardsLink = this.applicant?.hasAwards;
        if (this.applicant && this.tokenService.hasCurrentValidToken()) {
          if (location.pathname.includes('auth')) {
            this.router.navigateByUrl('/apply/applications');
          }
          this.sessionKeepAliveService.startWatching();
          this.timeoutService.start();
          this.loggedIn = true;
        } else {
          this.sessionKeepAliveService.stopWatching();
          this.timeoutService.stop();
          this.loggedIn = false;
        }
      })
    );
    this.sub.add(
      this.supportService.changesTo$('liveChatData').subscribe((liveChatData) => {
        this.liveChatAvailable = liveChatData?.available;
      })
    );

    this.appShellService.setSupportLinks();
    this.appShellService.registerSupportLinkListener();
  }

  execSupportLink (link: SupportLink) {
    if ('onClick' in link) {
      link.onClick();
    } else if (link.external && link.link) {
      window.open(link.link);
    }
  }

  toggleMobileMenu () {
    this.mobileMenuOpen = !this.mobileMenuOpen;
  }

  async keepMeSignedIn () {
    await this.tokenService.getLatestToken();
  }

  async handleLiveChatClick () {
    await this.supportService.openLiveChat();
  }

  async handleEmailClick () {
    await this.supportService.openSupportEmailModal();
  }

  onSignOutClick () {
    this.tokenService.logout();
  }

  ngOnDestroy () {
    this.sub.unsubscribe();
  }

}