import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import { IconCloseMediumOutline } from '@teamleader/ui-icons';
import uiUtilities from '@teamleader/ui-utilities';
import cx from 'classnames';
import React, { useEffect, useState } from 'react';
import IconButton from '../iconButton';
import Link from '../link';
import LoadingSpinner from '../loadingSpinner';
import { TextBody } from '../typography';
import theme from './theme.css';

var Toast = function Toast(_ref) {
  var children = _ref.children,
      className = _ref.className,
      label = _ref.label,
      processing = _ref.processing,
      timeout = _ref.timeout,
      onTimeout = _ref.onTimeout,
      link = _ref.link,
      action = _ref.action,
      actionLabel = _ref.actionLabel,
      onClose = _ref.onClose;

  var _useState = useState(undefined),
      _useState2 = _slicedToArray(_useState, 2),
      currentTimeout = _useState2[0],
      setCurrentTimeout = _useState2[1];

  var clearCurrentTimeout = function clearCurrentTimeout() {
    clearTimeout(currentTimeout);
    setCurrentTimeout(undefined);
  };

  var scheduleTimeout = function scheduleTimeout() {
    if (currentTimeout) {
      clearCurrentTimeout();
    }

    setCurrentTimeout(setTimeout(function () {
      if (onTimeout) {
        onTimeout();
      }

      clearCurrentTimeout();
    }, timeout));
  };

  var handleMouseEnter = function handleMouseEnter() {
    if (timeout) {
      clearCurrentTimeout();
    }
  };

  var handleMouseLeave = function handleMouseLeave() {
    if (timeout) {
      scheduleTimeout();
    }
  };

  var renderCustomAction = function renderCustomAction() {
    return action && /*#__PURE__*/React.createElement(Link, {
      className: theme['action-link'],
      onClick: action
    }, actionLabel);
  };

  var renderCustomLink = function renderCustomLink() {
    return link && /*#__PURE__*/React.createElement(TextBody, null, /*#__PURE__*/React.cloneElement(link, {
      className: cx(link.props.className, theme['action-link'])
    }));
  };

  var renderCloseButton = function renderCloseButton() {
    return onClose && /*#__PURE__*/React.createElement(IconButton, {
      className: theme['action-button'],
      icon: /*#__PURE__*/React.createElement(IconCloseMediumOutline, null),
      color: "white",
      onClick: onClose
    });
  };

  useEffect(function () {
    if (timeout) {
      scheduleTimeout();
    }

    return function () {
      clearCurrentTimeout();
    };
  }, [timeout]);
  var classNames = cx(uiUtilities['reset-box-sizing'], uiUtilities['box-shadow-400'], theme['toast'], className);
  return /*#__PURE__*/React.createElement("div", {
    "data-teamleader-ui": "toast",
    onMouseEnter: handleMouseEnter,
    onMouseLeave: handleMouseLeave,
    className: classNames
  }, processing && /*#__PURE__*/React.createElement(LoadingSpinner, {
    className: theme['spinner'],
    color: "neutral",
    tint: "lightest"
  }), /*#__PURE__*/React.createElement(TextBody, {
    className: theme['label'],
    color: "neutral",
    tint: "lightest",
    element: "div"
  }, label, children), renderCustomAction() || renderCustomLink() || renderCloseButton());
};

export default Toast;