import { parse } from "cookie";
import { CloseIcon } from "../../lib/SvgComponents";
import { TextButton } from "../Button";
import {
  deleteImpersonatedUser,
  revertQppHasAuthsCookie,
  revertApmPaymentCookie,
} from "../../session/logout";

const viewingToolUrl = "/user/helpdesk-viewing-tool";
const getViewType = (viewType) =>
  ({
    username: "HARP ID",
    npi: "NPI",
    tin: "TIN",
    apm_id: "APM Entity",
    cms_id: "Registry",
    vg_id: "Virtual Group",
  })[viewType];

const ImpersonatorBanner = () => {
  const {
    qpp_auth_token: token = null,
    qpp_impersonated_user: user = null,
    qpp_impersonated_type: viewType = null,
  } = parse(document.cookie);

  const className = [
    "qpp-u-display--flex",
    "qpp-u-justify-content--between",
    "qpp-u-fill--gold-20",
    "qpp-u-padding-x--40",
    "qpp-u-padding-y--24",
    "qpp-u-font-size--14",
    "qpp-u-color--gray-80",
  ].join(" ");

  const onClick = async () => {
    const fn = () => {
      deleteImpersonatedUser({
        qpp_impersonated_user: user,
        qpp_impersonated_type: viewType,
      });

      // Set user_has_apm_payments cookie back to impersonator's value
      revertApmPaymentCookie();

      // Set qpp_has_authorizations cookie back to impersonator's value
      revertQppHasAuthsCookie();
      window.location.href = viewingToolUrl;
    };
    try {
      const { origin } = window.location;
      const url = `${origin}/api/auth/helpdesk/view`;
      const options = {
        method: "DELETE",
        headers: {
          Accept: "application/vnd.qpp.cms.gov.v2+json",
          Authorization: `Bearer ${token}`,
        },
      };
      await fetch(url, options);
      fn();
    } catch (error) {
      fn();
    }
  };

  return (
    token &&
    user && (
      <div className={className}>
        <div>
          VIEW ONLY | You are currently viewing {getViewType(viewType)}:{" "}
          <strong>{user}</strong>
        </div>
        <TextButton onClick={onClick} className="qpp-u-color--gray-80">
          Exit View Mode
          <CloseIcon />
        </TextButton>
      </div>
    )
  );
};

export default ImpersonatorBanner;