/**
 * TEAM: frontend_infra
 * @flow
 * @deprecated prefer latitude/Toaster
 */

import * as React from "react";
import {css, StyleSheet} from "aphrodite";
import {TransitionGroup, CSSTransition} from "react-transition-group";
// TODO: Fix this eslint issue on next edit. This is an autogenerated comment.
// eslint-disable-next-line flexport/no-legacy-dependencies
import {zIndices} from "latitude/tools/deprecatedZIndices";
import type {ToastRecord} from "./DeprecatedToastStore";
import {padding} from "../styles/deprecatedWhitespace";
import Toast from "./Toast";
import connectToStores from "../connectors/connectToStores";
import DeprecatedToastStore from "./DeprecatedToastStore";

export type DeprecatedToasterPropsFromParent = {
  /* Option to add space to the top so it doesn't overlap with a header */
  +topOffset?: number,
  ...
};

export type DeprecatedToasterProps = {
  ...DeprecatedToasterPropsFromParent,
  +toasts: Array<ToastRecord>,
  ...
};

/**
 * DeprecatedToaster is an invisible full page overlay which manages and displays incoming and outgoing toasts. Head over to [Toast Documention](/design/components/notifications/toast#Toast) for examples, UI anatomy, and toast options.
 *
 * **Adding toasts:**
 *
 * 1. Ensure DeprecatedConnectedToaster is rendered in your app (`import DeprecatedConnectedToaster from "latitude/toast/DeprecatedConnectedToaster";`)
 *
 * 2. Use DeprecatedToastActions to emit a toast: `DeprecatedToastActions.show({message, intent});`
 *
 *
 * **How it works**
 *
 * Toasts will automatically stack and disappear according to the default settings. To display a toast, use: `DeprecatedToastActions.show({message, intent});`. You can optionally specify a timeout duration by passing a second argument to `show()`. (The default duration is `3000ms`.)
 *
 * @short The manager that controls Toast animation and display
 * @brandStatus V2
 * @status Stable
 * @category Feedback */
export class DeprecatedToaster extends React.PureComponent<DeprecatedToasterProps> {
  render(): React.Node {
    const {topOffset} = this.props;
    return (
      <TransitionGroup
        className={css(styles.toaster, padding.t.m)}
        style={{top: topOffset || 0}}
      >
        {this.props.toasts.map(toast => (
          <CSSTransition
            key={`${toast.message}-${toast.id}`}
            timeout={300}
            classNames={{
              enter: css(styles.toastEnter),
              enterActive: css(styles.toastEnterActive),
              exit: css(styles.toastExit),
              exitActive: css(styles.toastExitActive),
            }}
          >
            {/* The active-toast class is used by the Flexport gmail extension,
             * please look there before removing this - benbernard 2018-08-09
             */}
            {/* eslint-disable-next-line flexport/no-oocss */}
            <div className="active-toast">
              <Toast
                message={toast.message}
                action={toast.action}
                intent={toast.intent}
              />
            </div>
          </CSSTransition>
        ))}
      </TransitionGroup>
    );
  }
}

const styles = StyleSheet.create({
  toaster: {
    position: "fixed",
    left: "50%",
    transform: "translateX(-50%)",
    zIndex: zIndices.zIndex1500AboveModal.zIndex,
    textAlign: "center",
  },
  toastEnter: {
    opacity: 0,
    transform: "translateX(-64px)",
  },
  toastEnterActive: {
    opacity: 1,
    transform: "translateX(0)",
    transition: "all 0.3s cubic-bezier(.42,0,.58,1)",
  },
  toastExit: {
    opacity: 1,
    transform: "translateX(0)",
  },
  toastExitActive: {
    opacity: 0,
    transform: "translateX(48px)",
    transition: "all 0.3s cubic-bezier(.42,0,.58,1)",
  },
});

const connector = (connectToStores(
  [DeprecatedToastStore],
  (
    propsFromParent: DeprecatedToasterPropsFromParent
  ): DeprecatedToasterProps => ({
    ...propsFromParent,
    toasts: DeprecatedToastStore.getAll(),
  })
): (
  React.ComponentType<DeprecatedToasterProps>
) => React.ComponentType<DeprecatedToasterPropsFromParent>);

const DeprecatedConnectedToaster: React.ComponentType<DeprecatedToasterPropsFromParent> =
  connector(DeprecatedToaster);

export default DeprecatedConnectedToaster;