import * as React from "react";
import classNames from "classnames";

import { Check } from "@faulty/gdq-icons/icons/Check";
import { Close } from "@faulty/gdq-icons/icons/Close";
import { ExclamationOctagon } from "@faulty/gdq-icons/icons/ExclamationOctagon";
import { ExclamationTriangle } from "@faulty/gdq-icons/icons/ExclamationTriangle";
import { InfoCircle } from "@faulty/gdq-icons/icons/InfoCircle";

import { Clickable } from "../Clickable/Clickable";

import styles from "./Callout.module.css";

export type CalloutType = "success" | "info" | "warning" | "danger";

const TYPE_CLASSES = {
  success: styles.typeSuccess,
  info: styles.typeInfo,
  warning: styles.typeWarning,
  danger: styles.typeDanger,
};

function getIcon(type: CalloutType) {
  switch (type) {
    case "success":
      return Check;
    case "info":
      return InfoCircle;
    case "warning":
      return ExclamationTriangle;
    case "danger":
      return ExclamationOctagon;
  }
}

export interface CalloutProps {
  type: CalloutType;
  children: React.ReactNode;
  className?: string;
  onClose?: () => unknown;
}

export function Callout(props: CalloutProps) {
  const { type, children, className, onClose } = props;

  const Icon = getIcon(type);

  return (
    <div className={classNames(styles.callout, className, TYPE_CLASSES[type])}>
      <div className={styles.iconSidebar}>
        <Icon className={styles.icon} />
      </div>
      <div className={styles.content}>{children}</div>
      {onClose != null ? (
        <Clickable className={styles.dismissBar} onPress={onClose}>
          <Close className={styles.dismissIcon} />
        </Clickable>
      ) : null}
    </div>
  );
}