/**
 * TEAM: frontend_infra
 * @flow
 */

/* eslint-disable flexport/no-unused-aphrodite-styles */

import * as React from "react";
import {css, StyleSheet} from "aphrodite";
import {typeScale} from "../styles/typography";
import TextLinkAction from "../TextLinkAction";
import colors from "../colors";
import whitespace from "../styles/whitespace";

export type ToastIntent = "none" | "success" | "danger";

export type ToastAction =
  | {|
      +type: "undo",
      +onClick: () => void,
    |}
  | {|
      +type: "refresh",
      +onClick: () => void,
    |}
  | {|
      +type: "copy_to_clipboard",
      +onClick: () => void,
    |}
  | {|
      +type: "none",
    |};

export type ToastProps = {|
  /** The message to be shown in the Toast body. */
  +message: string,
  /** Intents are styles that convey meaning and reinforce the action, defaults to 'none'. */
  +intent?: ToastIntent,
  /** Actions are supported actions available on the Toast, defaults to 'none'. */
  +action?: ToastAction,
|};

const ACTION_LABELS = {
  undo: "Undo",
  refresh: "Refresh",
  copy_to_clipboard: "Copy to Clipboard",
  none: null,
};

/**
 * Toasts actually *ARE NOT* implemented with `Toast.jsx`. See [Toaster docs](/design/components/notifications/toast#Toaster) for implementation documentation.
 *
 * @short A quick message that should provide some additional information that relates to a user action. Toasts shouldn't interrupt the user or require input to dismiss.
 * @brandStatus V2
 * @status Stable
 * @category Feedback */
const Toast: React.AbstractComponent<ToastProps, mixed> =
  React.memo<ToastProps>(function Toast({
    action = {type: "none"},
    message,
    intent = "none",
  }: ToastProps) {
    const onClick = action.type === "none" ? undefined : action.onClick;
    const actionLabel = ACTION_LABELS[action.type];
    const link =
      actionLabel != null ? (
        <TextLinkAction weight="bold" darkBackground={true} onClick={onClick}>
          {actionLabel}
        </TextLinkAction>
      ) : null;

    return (
      <div className={css(styles.wrapper, styles[intent])}>
        <div data-qa-id="Toast">{message}</div>
        {link ? <div className={css(styles.actionPadding)}>{link}</div> : null}
      </div>
    );
  });

Toast.displayName = "Toast";

export default Toast;

const styles = StyleSheet.create({
  wrapper: {
    display: "inline-flex",
    position: "relative",
    alignItems: "center",
    background: colors.grey60,
    color: colors.white,
    boxShadow: "0 0 20px rgba(57, 65, 77, 0.15)",
    borderLeft: `solid 12px`,
    marginBottom: whitespace.m,
    padding: "24px 32px 24px 20px",
    ...typeScale.base,
  },
  actionPadding: {paddingLeft: "40px"},
  none: {
    borderColor: colors.black,
  },
  success: {
    borderColor: colors.green40,
  },
  danger: {
    borderColor: colors.red40,
  },
});