import * as React from 'react';
import { last, noop } from 'lodash';
import { Toast } from '../elements/Toast';

export type Props = React.HTMLProps<HTMLDivElement> & {
  loaf: Array<{ id: number; text: string }>;
  onDismiss: () => unknown;
};

const DEFAULT_DISMISS = 1e4;

export const Toaster = React.memo(({ loaf, onDismiss, className }: Props) => {
  const slice = last(loaf);

  React.useEffect(
    () => {
      if (!slice) {
        return noop;
      }

      const timer = setTimeout(() => {
        onDismiss();
      }, DEFAULT_DISMISS);

      return () => {
        clearTimeout(timer);
      };
    },
    [slice, onDismiss]
  );

  if (!slice) {
    return null;
  }

  return (
    <div className={className}>
      <Toast key={slice.id} onClick={onDismiss} tabIndex={0}>
        {slice.text}
      </Toast>
    </div>
  );
});
