import React from "react";
import { STATUS_VARIANT } from "../types";
import { Banner } from "../components/Banner";

export enum COMPONENT_STATUS {
  BETA = "beta",
  DOCUMENTATION_PENDING = "documentation-pending",
  A11Y_VIOLATION_COLOR_CONTRAST = "a11y-violation-color-contrast",
}

export interface ComponentStatusProps {
  status?: COMPONENT_STATUS;
}

const statusVariantMap = {
  [COMPONENT_STATUS.BETA]: STATUS_VARIANT.DANGER,
  [COMPONENT_STATUS.DOCUMENTATION_PENDING]: STATUS_VARIANT.WARNING,
  [COMPONENT_STATUS.A11Y_VIOLATION_COLOR_CONTRAST]: STATUS_VARIANT.WARNING,
};

const statusTitleMap = {
  [COMPONENT_STATUS.BETA]: "Beta",
  [COMPONENT_STATUS.DOCUMENTATION_PENDING]: "Documentation Pending",
  [COMPONENT_STATUS.A11Y_VIOLATION_COLOR_CONTRAST]: "Poor Color Contrast",
};

const statusMessageMap = {
  [COMPONENT_STATUS.BETA]: `This component is still a work-in-progress and should not be used for
  production-ready apps.`,
  [COMPONENT_STATUS.DOCUMENTATION_PENDING]: `The documentation for this component is undergoing maintenance. All component configuration examples may not be illustrated below and some demonstrations may not be working`,
  [COMPONENT_STATUS.A11Y_VIOLATION_COLOR_CONTRAST]: `Variants of this component violate acceptable color contrast ratio for legibility.`,
};

export const ComponentStatus = ({ status }: ComponentStatusProps) => {
  if (!status) {
    return null;
  }

  return (
    <Banner
      title={statusTitleMap[status]}
      variant={statusVariantMap[status]}
      withIcon
    >
      {statusMessageMap[status]}
    </Banner>
  );
};