import React from 'react';
import PropTypes from 'prop-types';
import { motion } from 'framer-motion';
import useTimeout from '../../hooks/useTimeout';
import CloseButton from '../CloseButton';
import Icon from '../Icon';
import CompleteIcon from '../CompleteIcon';

const Toast = ({
  id,
  title,
  content,
  type,
  autoDismiss,
  dismissHandler,
  dismissDuration,
  CustomIcon,
  className
}) => {
  if (autoDismiss) {
    useTimeout(dismissHandler, dismissDuration);
  }

  const getIcon = () => {
    if (CustomIcon) {
      return CustomIcon;
    }

    if (type === 'success') {
      return /*#__PURE__*/React.createElement(CompleteIcon, null);
    }

    if (type === 'warning') {
      return /*#__PURE__*/React.createElement(Icon, {
        name: "warning"
      });
    }

    if (type === 'error') {
      return /*#__PURE__*/React.createElement(Icon, {
        name: "error"
      });
    }

    return /*#__PURE__*/React.createElement(Icon, {
      name: "info"
    });
  };

  const getContent = () => {
    if (typeof content === 'function') {
      return content();
    }

    return content;
  };

  return /*#__PURE__*/React.createElement(motion.li, {
    key: id,
    layout: true,
    initial: {
      opacity: 0,
      y: 50,
      scale: 0.3
    },
    animate: {
      opacity: 1,
      y: 0,
      scale: 1
    },
    transition: {
      delay: 0.2,
      type: 'spring',
      layoutY: {
        delay: 0,
        type: 'spring'
      }
    },
    exit: {
      opacity: 0,
      scale: 0.5,
      transition: {
        duration: 0.2
      }
    },
    className: `toast toast--${type} ${className}`
  }, /*#__PURE__*/React.createElement("div", {
    className: "toast-icon"
  }, getIcon()), /*#__PURE__*/React.createElement("div", {
    className: "toast-content"
  }, /*#__PURE__*/React.createElement("h4", {
    className: "toast-content__title"
  }, title), getContent()), /*#__PURE__*/React.createElement(CloseButton, {
    onClick: dismissHandler
  }));
};

Toast.propTypes = {
  id: PropTypes.any.isRequired,
  title: PropTypes.string.isRequired,
  content: PropTypes.any.isRequired,
  type: PropTypes.oneOf(['info', 'warning', 'error', 'success']).isRequired,
  autoDismiss: PropTypes.bool,
  dismissHandler: PropTypes.func,
  dismissDuration: PropTypes.number,
  CustomIcon: PropTypes.node,
  className: PropTypes.string
};
Toast.defaultProps = {
  autoDismiss: true,
  dismissHandler: null,
  dismissDuration: 8000,
  CustomIcon: null,
  className: ''
};
export default Toast;