import _slicedToArray from "@babel/runtime/helpers/slicedToArray";

/* eslint-disable import/no-cycle */

/* eslint-disable react-hooks/exhaustive-deps */
import React, { useEffect, useState } from "react";
import PropTypes from "prop-types";
import ChevronDoubleRight from "clever-react/ui/Icon/ChevronDoubleRight";
import IconMenu from "clever-react/ui/Icon/Menu";
import cx from "classnames";
import { Fill } from "nano-slots";
import ClickAwayListener from "../../../ClickAwayListener";
import getClasses from "./styles";
import { useLayout } from "../index";
import { modes } from "../LayoutContext";

var Nav = function Nav(_ref) {
  var children = _ref.children,
      preferMode = _ref.preferMode,
      onChangePreferMode = _ref.onChangePreferMode,
      className = _ref.className;

  var _useLayout = useLayout(),
      nav = _useLayout.nav,
      enableCollapse = _useLayout.enableCollapse,
      openNav = _useLayout.openNav,
      closeNav = _useLayout.closeNav,
      mode = _useLayout.mode,
      setMode = _useLayout.setMode,
      serPreferMode = _useLayout.serPreferMode,
      enableClickAway = _useLayout.enableClickAway;

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

  var classes = getClasses({
    collapse: mode === modes.popover,
    isOpen: nav
  });
  useEffect(function () {
    if (preferMode) {
      serPreferMode(preferMode);
    }
  }, [preferMode]);

  var setNavModeCollapse = function setNavModeCollapse() {
    setMode(modes.popover);
    onChangePreferMode(modes.popover);
  };

  var setNavModeSidebar = function setNavModeSidebar() {
    setMode(modes.sidebar);
    onChangePreferMode(modes.sidebar);
  };

  var handleClickAway = function handleClickAway() {
    if (enableClickAway) {
      closeNav(); // Prevent click away on the button to reopen nav (Mobile)

      setEnableOpenNav(false);
      setTimeout(function () {
        return setEnableOpenNav(true);
      }, 100);
    }
  };

  if (mode === modes.popover) {
    return /*#__PURE__*/React.createElement(Fill, {
      name: "Header.left"
    }, /*#__PURE__*/React.createElement("div", {
      className: className
    }, /*#__PURE__*/React.createElement("nav", {
      className: classes.root
    }, /*#__PURE__*/React.createElement("button", {
      type: "button",
      className: classes.iconMenu,
      onClick: openNav,
      disabled: !enableOpenNav,
      "aria-label": "Open menu"
    }, /*#__PURE__*/React.createElement(IconMenu, {
      color: "currentColor",
      size: 18
    })), nav && /*#__PURE__*/React.createElement(ClickAwayListener, {
      onClickAway: handleClickAway
    }, /*#__PURE__*/React.createElement("div", {
      className: classes.floatContainer
    }, enableCollapse && /*#__PURE__*/React.createElement("button", {
      type: "button",
      className: classes.buttonCollapse,
      onClick: setNavModeSidebar
    }, /*#__PURE__*/React.createElement(ChevronDoubleRight, {
      color: "currentColor",
      size: 24
    })), children)))));
  }

  return /*#__PURE__*/React.createElement("nav", {
    className: cx(classes.root, className)
  }, /*#__PURE__*/React.createElement("div", {
    className: classes.staticContainer
  }, /*#__PURE__*/React.createElement("button", {
    type: "button",
    className: classes.buttonCollapse,
    onClick: setNavModeCollapse
  }, /*#__PURE__*/React.createElement(ChevronDoubleRight, {
    color: "currentColor",
    size: 24
  })), children));
};

Nav.propTypes = {
  preferMode: PropTypes.oneOf(Object.values(modes)),
  onChangePreferMode: PropTypes.func
};
Nav.defaultProps = {
  preferMode: modes.sidebar,
  onChangePreferMode: function onChangePreferMode() {}
};
export default Nav;