GCTC-NTGC / TalentCloud

import * as React from "react";

import { defineMessages, FormattedMessage, useIntl } from "react-intl";

import dayjs from "dayjs";

import relativeTime from "dayjs/plugin/relativeTime";

import utc from "dayjs/plugin/utc";

import { Link } from "../../../models/app";

import { getLocale } from "../../../helpers/localize";

const stepNames = defineMessages({

  welcome: {

    id: "applicationTimeline.progressBar.welcome",

    defaultMessage: "Welcome",

  },

  step01: {

    id: "applicationTimeline.progressBar.step01",

    defaultMessage: "Step 1/6",

  },

  step02: {

    id: "applicationTimeline.progressBar.step02",

    defaultMessage: "Step 2/6",

  },

  step03: {

    id: "applicationTimeline.progressBar.step03",

    defaultMessage: "Step 3/6",

  },

  step04: {

    id: "applicationTimeline.progressBar.step04",

    defaultMessage: "Step 4/6",

  },

  step05: {

    id: "applicationTimeline.progressBar.step05",

    defaultMessage: "Step 5/6",

  },

  step06: {

    id: "applicationTimeline.progressBar.step06",

    defaultMessage: "Step 6/6",

  },

});

// Returns the list item element that corresponds to the steps status.

const createStep = (

  link: Link,

  status: ProgressBarStepStatus,

  icons: {

    [key in ProgressBarStepStatus]: { className: string; color: string };

  },

): React.ReactElement => {

  const isComplete: boolean = status === "complete";

  const isCurrent: boolean = status === "current";

  const hasError: boolean = status === "error";

  if (isComplete) {

    return (

      <li key={link.title}>

        <span data-c-visibility="invisible">

          <FormattedMessage

            id="applicationTimeline.progressbar.completedStepLabel"

            defaultMessage="Completed: "

            description="Visually hidden text used to indicate the completed steps."

          />

        </span>

        <a href={link.url} title={link.title}>

          <span data-c-visibility="invisible">{link.text}</span>

          <i

            className={icons[status].className}

            data-c-color={icons[status].color}

          />

        </a>

      </li>

    );

  }

  if (isCurrent) {

    return (

      <li key={link.title}>

        <span data-c-visibility="invisible">

          <FormattedMessage

            id="applicationTimeline.progressbar.currentStepLabel"

            defaultMessage="Current: "

            description="Visually hidden text used to indicate the current steps."

          />

        </span>

        <span data-c-visibility="invisible">{link.text}</span>

        <i

          className={icons[status].className}

          data-c-color={icons[status].color}

        />

      </li>

    );

  }

  if (hasError) {

    return (

      <li key={link.title}>

        <span data-c-visibility="invisible">

          <FormattedMessage

            id="applicationTimeline.progressbar.errorStepLabel"

            defaultMessage="Error: "

            description="Visually hidden text used to indicate the steps with errors."

          />

        </span>

        <a href={link.url} title={link.title}>

          <span data-c-visibility="invisible">{link.text}</span>

          <i

            className={icons[status].className}

            data-c-color={icons[status].color}

          />

        </a>

      </li>

    );

  }

  return (

    <li key={link.title} title={link.title}>

      <span data-c-visibility="invisible">{link.text}</span>

      <i

        className={icons[status].className}

        data-c-color={icons[status].color}

      />

    </li>

  );

};

export type ProgressBarStepStatus =

  | "default"

  | "complete"

  | "error"

  | "current";

interface ProgressBarProps {

  /** The closing date of the job poster. */

  closeDateTime: Date;

  /** The current step number. This is required for the informational steps, since they do not use a list item. */

  stepNumber: number;

  /** List of the steps. */

  steps: { link: Link; status: ProgressBarStepStatus }[];

}

const ProgressBar: React.FunctionComponent<ProgressBarProps> = ({

  steps,

  closeDateTime,

  stepNumber,

}) => {

  const intl = useIntl();

  const locale = getLocale(intl.locale);

  // dayjs() relativeTime API plugin configuration https://day.js.org/docs/en/display/from-now.

  const config = {

    thresholds: [

      { l: "s", r: 1 },

      { l: "ss", r: 59, d: "second" },

      { l: "m", r: 1 },

      { l: "mm", r: 59, d: "minute" },

      { l: "h", r: 1 },

      { l: "hh", r: 23, d: "hour" },

      { l: "d", r: 1 },

      { l: "dd", r: 29, d: "day" },

      { l: "M", r: 1 },

      { l: "MM", r: 11, d: "month" },

      { l: "y" },

      { l: "yy", d: "year" },

    ],

    rounding: Math.floor,

  };

  dayjs.extend(relativeTime, config);

  dayjs.extend(utc);

  // There are nine steps throughout the timeline, some steps using the same title (informational steps). This maps the step number to its corresponding title.

  const getStepName = {

    1: intl.formatMessage(stepNames.welcome),

    2: intl.formatMessage(stepNames.step01),

    3: intl.formatMessage(stepNames.step02),

    4: intl.formatMessage(stepNames.step02),

    5: intl.formatMessage(stepNames.step03),

    6: intl.formatMessage(stepNames.step03),

    7: intl.formatMessage(stepNames.step04),

    8: intl.formatMessage(stepNames.step05),

    9: intl.formatMessage(stepNames.step06),

  };

  const icons: {

    [key in ProgressBarStepStatus]: { className: string; color: string };

  } = {

    default: {

      className: "fas fa-circle",

      color: "grey",

    },

    complete: {

      className: "fas fa-check-circle",

      color: "go",

    },

    error: {

      className: "fas fa-exclamation-circle",

      color: "stop",

    },

    current: {

      className: "far fa-circle",

      color: "white",

    },

  };

  return (

    <div data-c-background="black(100)" data-c-padding="tb(1)">

      <div data-c-container="large">

        <div data-c-grid="gutter(all, 1)">

          <div data-c-grid-item="tl(1of2)" data-c-align="base(center) tl(left)">

            <span data-c-color="white">{getStepName[stepNumber]}</span>

            <ol className="applicant-application-progress-bar">

              {steps.map(

                ({ link, status }): React.ReactElement =>

                  createStep(link, status, icons),

              )}

            </ol>

          </div>

          <div

            data-c-grid-item="tl(1of2)"

            data-c-align="base(center) tl(right)"

          >

            <span data-c-color="white">

              <FormattedMessage

                id="applicationTimeline.progressbar.applicationDeadline"

                defaultMessage="Application Deadline: {timeLeft}"

                description="Label for the application deadline"

                values={{

                  timeLeft: dayjs(closeDateTime).utc().locale(locale).fromNow(),

                }}

              />

            </span>

          </div>

        </div>

      </div>

    </div>

  );

};

export default ProgressBar;