import _extends from "@babel/runtime/helpers/extends";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
var _excluded = ["children", "className", "scrollable", "title", "form", "onSubmit", "tertiaryAction", "secondaryAction", "primaryAction", "leftAction", "onCloseClick"];
import { IconDragMediumFilled } from '@teamleader/ui-icons';
import cx from 'classnames';
import omit from 'lodash.omit';
import React, { useCallback, useEffect, useRef, useState } from 'react';
import { useResizeDetector } from 'react-resize-detector';
import { Button, ButtonGroup, DialogBase, Heading3 } from '../../index';
import theme from './theme.css';

var Dialog = function Dialog(_ref) {
  var children = _ref.children,
      className = _ref.className,
      _ref$scrollable = _ref.scrollable,
      scrollable = _ref$scrollable === void 0 ? true : _ref$scrollable,
      title = _ref.title,
      form = _ref.form,
      onSubmit = _ref.onSubmit,
      tertiaryAction = _ref.tertiaryAction,
      secondaryAction = _ref.secondaryAction,
      primaryAction = _ref.primaryAction,
      leftAction = _ref.leftAction,
      onCloseClick = _ref.onCloseClick,
      otherProps = _objectWithoutProperties(_ref, _excluded);

  var bodyRef = useRef(null);
  var dragHandleRef = useRef(null);

  var _useState = useState(true),
      _useState2 = _slicedToArray(_useState, 2),
      showScrollShadow = _useState2[0],
      setShowScrollShadow = _useState2[1];

  var _useState3 = useState(false),
      _useState4 = _slicedToArray(_useState3, 2),
      reachedScrollEnd = _useState4[0],
      setReachedScrollEnd = _useState4[1];

  var handleScrollShadow = useCallback(function () {
    var currentRef = bodyRef.current;

    if (currentRef) {
      setShowScrollShadow(currentRef.scrollHeight > currentRef.clientHeight);
    }
  }, [bodyRef]);
  useEffect(function () {
    handleScrollShadow();
  }, [bodyRef, otherProps.active]);
  useResizeDetector({
    refreshMode: 'throttle',
    refreshRate: 250,
    onResize: handleScrollShadow,
    targetRef: bodyRef
  });

  var getHeader = function getHeader() {
    var dragIcon = /*#__PURE__*/React.createElement("div", {
      className: theme['drag-icon'],
      ref: dragHandleRef
    }, /*#__PURE__*/React.createElement(IconDragMediumFilled, null));
    return /*#__PURE__*/React.createElement(DialogBase.Header, {
      icon: dragIcon,
      onCloseClick: onCloseClick
    }, /*#__PURE__*/React.createElement(Heading3, {
      maxLines: 1
    }, title));
  };

  var getFooter = function getFooter() {
    return /*#__PURE__*/React.createElement(DialogBase.Footer, {
      display: "flex",
      justifyContent: leftAction ? 'space-between' : 'flex-end',
      className: cx(_defineProperty({}, theme['scroll-shadow'], !reachedScrollEnd && showScrollShadow))
    }, leftAction && /*#__PURE__*/React.createElement(Button, leftAction), /*#__PURE__*/React.createElement(ButtonGroup, {
      justifyContent: "flex-end"
    }, tertiaryAction && /*#__PURE__*/React.createElement(Button, _extends({}, tertiaryAction, {
      level: "link"
    })), secondaryAction && /*#__PURE__*/React.createElement(Button, secondaryAction), /*#__PURE__*/React.createElement(Button, _extends({
      level: "primary"
    }, primaryAction))));
  };

  var classNames = cx(theme['dialog'], className);
  var restProps = omit(otherProps, ['onCloseClick', 'primaryAction', 'secondaryAction', 'tertiaryAction', 'leftAction']);
  return /*#__PURE__*/React.createElement(DialogBase, _extends({
    className: classNames
  }, restProps, {
    scrollable: false,
    initialFocusRef: bodyRef,
    dragHandleRef: dragHandleRef,
    form: form,
    onSubmit: onSubmit
  }), title && getHeader(), /*#__PURE__*/React.createElement(DialogBase.Body, {
    ref: bodyRef,
    scrollable: scrollable,
    handleShowScrollShadow: setReachedScrollEnd
  }, children), getFooter());
};

export default Dialog;