import { Injectable } from '@angular/core';
import { LocationService } from '@core/services/location.service';
import { I18nService } from '@yourcause/common/i18n';
import { ModalFactory } from '@yourcause/common/modals';
import { AttachYCState, BaseYCService } from '@yourcause/common/state';
import { PageHelpModalComponent } from './page-help-modal/page-help-modal.component';
import { PageHelpModalResources } from './page-help-modals.resources';
import { PageHelpModalState } from './page-help-modals.state';
import { PageHelpMap, PageHelpRoutes } from './page-help-modals.typing';
const ApplicationsHelpLink1 = 'https://webfiles.blackbaud.com/files/support/helpfiles/grantsconnect/content/gc-guide-applications-grant-managers.html';
const ApplicationsHelpLink2 = 'https://webfiles.blackbaud.com/files/support/helpfiles/grantsconnect/content/gc-grant-managers-applications.html';

@AttachYCState(PageHelpModalState)
@Injectable({ providedIn: 'root' })
export class PageHelpModalService extends BaseYCService<PageHelpModalState> {
  pageHelpRoutes = [
    PageHelpRoutes.APPLICATION
  ];

  keyFeaturesText = this.i18n.translate('common:hdrKeyFeatures', {}, 'Key Features');
  learnMoreText = this.i18n.translate('common:hdrLearnMore', {}, 'Learn More');
  viewAllResources = this.i18n.translate('common:textViewAllResources', {}, 'View all resources');
  findOutMoreText = this.i18n.translate(
    'common:textFindOutMoreInHelpCenter',
    {},
    'Find out more about this feature in our Help Center.'
  );

  constructor (
    private pageHelpModalResources: PageHelpModalResources,
    private i18n: I18nService,
    private modalFactory: ModalFactory,
    private locationService: LocationService
  ) {
    super();
  }

  get pageHelpDismissedMap () {
    return this.get('pageHelpDismissedMap');
  }

  /**
   * Sets the Page Help Map
   * The left side of this map is the route, and the right side is a boolean if it's been dismissed
   */
  async setPageHelpInfo () {
    if (!this.pageHelpDismissedMap) {
      const dismissedPageHelp = await this.pageHelpModalResources.getCompletedPageHelp();
      const map = dismissedPageHelp.reduce<PageHelpMap>((acc, item) => {
        return {
          ...acc,
          [item.tourKey]: !!item.dateCompleted
        };
      }, {} as PageHelpMap);
      this.set('pageHelpDismissedMap', map);
    }
  }

  /**
   * Based on the current route,
   * determine if we need to open the page help modal
   */
  checkIfWeShouldOpenPageHelpModal () {
    const genericRoute = this.locationService.getGenericRoute() as PageHelpRoutes;
    if (this.shouldShowModal(genericRoute)) {
      this.openModal(genericRoute);
    }
  }

  /**
   * Should we show the page help modal?
   *
   * @param route: Route to check
   * @returns if we should show the page help modal
   */
  shouldShowModal (route: PageHelpRoutes) {
    const isHelpRoute = this.pageHelpRoutes.includes(route);
    if (isHelpRoute) {
      const hasAlreadySeen = !!sessionStorage.getItem(route);
      const hasNotBeenDismissed = !this.pageHelpDismissedMap[route];

      return hasNotBeenDismissed && !hasAlreadySeen;
    }

    return false;
  }

  /**
   * Open the Page Help Modal
   *
   * @param route: Page route
   */
  async openModal (route: PageHelpRoutes) {
    sessionStorage.setItem(route, 'true');
    const dismiss = await this.modalFactory.open(
      PageHelpModalComponent,
      {
        route
      }
    );
    if (dismiss) {
      await this.pageHelpModalResources.dismissPageHelp(route);
    }
  }

  /**
   * Gets the Help Content to Display By Route
   *
   * @param route: Route to get content for
   * @returns the help content
   */
  getHelpContentByRoute (route: PageHelpRoutes) {
    switch (route) {
      case '/management/manage-applications/applications':
        return this.getApplicationHelpContent();
    }

    return null;
  }

  /**
   * Get the Application Help Content to be displayed in the modal
   *
   * @returns Help Content to Display for Applications Area
   */
  getApplicationHelpContent () {
    const firstLine = this.i18n.translate(
      'common:textUse',
      {},
      'Use the Applications area to manage applications submitted for your grant programs.'
    );
    const bullet1 = this.i18n.translate(
      'common:textApplicationHelpBullet1',
      {},
      'Route applications to specific workflow levels manually or using automation'
    );
    const bullet2 = this.i18n.translate(
      'common:textApplicationHelpBullet2',
      {},
      'Act on applications, including Approve, Decline, and Cancel'
    );
    const bullet3 = this.i18n.translate(
      'common:textApplicationHelpBullet3',
      {},
      'Add internal and external communications to the Application View'
    );
    const bullet4 = this.i18n.translate(
      'common:textApplicationHelpBullet4',
      {},
      'Download applications, including the Activity Trail'
    );
    const bulletLink1 = this.i18n.translate(
      'common:textExploreGetStartedWithApplicationsGuide',
      {},
      'Explore the "Get Started with Applications" guide'
    );

    return {
      modalHeader: this.i18n.translate(
        'common:hdrGetStartedWithApplications',
        {},
        'Get Started with Applications'
      ),
      modalContent: `<div>
        <div class="font-italic mb-3">${firstLine}</div>
        <div class="font-550 font-1-rem mb-2">${this.keyFeaturesText}</div>
        <ul>
          <li>${bullet1}</li>
          <li>${bullet2}</li>
          <li>${bullet3}</li>
          <li>${bullet4}</li>
        </ul>
        <div class="font-550 font-1-rem mt-3 mb-2">${this.learnMoreText}</div>
        <div class="font-italic mb-2">${this.findOutMoreText}</div>
        <ul>
          <li>
            <a class="anchor-tag"
              target="_blank"
              href="${ApplicationsHelpLink1}">
              ${bulletLink1}
            </a>
          </li>
          <li>
            <a class="anchor-tag"
              target="_blank"
              href="${ApplicationsHelpLink2}">
              ${this.viewAllResources}
            </a>
          </li>
        </ul>
      </div>`
    };
  }

}