"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.SidebarLayout = SidebarLayout;

var _react = require("@headlessui/react");

var _outline = require("@heroicons/react/outline");

var _react2 = require("react");

var _reactRouterDom = require("react-router-dom");

var _reactHotToast = require("react-hot-toast");

var _clsx = _interopRequireDefault(require("clsx"));

var _io = require("react-icons/io5");

var _reactTooltip = _interopRequireDefault(require("react-tooltip"));

var _auth = require("../../api/auth");

var _Icon = require("../Icon");

var _useOuterClick = require("../../lib/useOuterClick");

var _storage = require("../../utils/storage");

var _jsxRuntime = require("react/jsx-runtime");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }

function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }

function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }

function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }

function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }

function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }

function classNames() {
  for (var _len = arguments.length, classes = new Array(_len), _key = 0; _key < _len; _key++) {
    classes[_key] = arguments[_key];
  }

  return classes.filter(Boolean).join(" ");
}

function SidebarLayout(_ref) {
  var navigation = _ref.navigation;

  var _useState = (0, _react2.useState)(false),
      _useState2 = _slicedToArray(_useState, 2),
      sidebarOpen = _useState2[0],
      setSidebarOpen = _useState2[1];

  var _useState3 = (0, _react2.useState)(null),
      _useState4 = _slicedToArray(_useState3, 2),
      user = _useState4[0],
      setUser = _useState4[1];

  var _useState5 = (0, _react2.useState)(false),
      _useState6 = _slicedToArray(_useState5, 2),
      collapseSidebar = _useState6[0],
      setCollapseSidebar = _useState6[1];

  (0, _react2.useEffect)(function () {
    (0, _auth.getUser)().then(function (user) {
      setUser(user);
    });
  }, []);
  (0, _react2.useEffect)(function () {
    var _getLocalItem;

    var localCollapsed = (_getLocalItem = (0, _storage.getLocalItem)("sidebarCollapsed")) !== null && _getLocalItem !== void 0 ? _getLocalItem : false;
    var sidebarCollapsed = typeof localCollapsed === "string" ? JSON.parse(localCollapsed) : localCollapsed;
    setCollapseSidebar(sidebarCollapsed);
  }, []);
  (0, _react2.useEffect)(function () {
    (0, _storage.setLocalItem)("sidebarCollapsed", collapseSidebar);
  }, [collapseSidebar]);
  var closeOnOuterClick = (0, _react2.useCallback)(function () {
    if (!collapseSidebar && window.innerWidth < 1024) {
      setCollapseSidebar(true);
    }
  }, [collapseSidebar]);
  var innerRef = (0, _useOuterClick.useOuterClick)(closeOnOuterClick);

  if (user == null) {
    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
      children: "Loading..."
    });
  }

  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactTooltip.default, {
      disable: !collapseSidebar
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHotToast.Toaster, {
      position: "top-right",
      reverseOrder: false
    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
      className: "flex",
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Transition.Root, {
        show: sidebarOpen,
        as: _react2.Fragment,
        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.Dialog, {
          as: "div",
          className: "fixed inset-0 z-40 flex md:hidden",
          onClose: setSidebarOpen,
          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Transition.Child, {
            as: _react2.Fragment,
            enter: "transition-opacity ease-linear duration-300",
            enterFrom: "opacity-0",
            enterTo: "opacity-100",
            leave: "transition-opacity ease-linear duration-300",
            leaveFrom: "opacity-100",
            leaveTo: "opacity-0",
            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Dialog.Overlay, {
              className: "fixed inset-0 bg-gray-600 bg-opacity-75"
            })
          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Transition.Child, {
            as: _react2.Fragment,
            enter: "transition ease-in-out duration-300 transform",
            enterFrom: "-translate-x-full",
            enterTo: "translate-x-0",
            leave: "transition ease-in-out duration-300 transform",
            leaveFrom: "translate-x-0",
            leaveTo: "-translate-x-full",
            children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
              className: "relative max-w-xs w-full bg-white pt-5 pb-4 flex-1 flex flex-col",
              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Transition.Child, {
                as: _react2.Fragment,
                enter: "ease-in-out duration-300",
                enterFrom: "opacity-0",
                enterTo: "opacity-100",
                leave: "ease-in-out duration-300",
                leaveFrom: "opacity-100",
                leaveTo: "opacity-0",
                children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
                  className: "absolute top-0 right-0 -mr-12 pt-2",
                  children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("button", {
                    type: "button",
                    className: "ml-1 flex items-center justify-center h-10 w-10 rounded-full focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white",
                    onClick: function onClick() {
                      return setSidebarOpen(false);
                    },
                    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
                      className: "sr-only",
                      children: "Close sidebar"
                    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_outline.XIcon, {
                      className: "h-6 w-6 text-white",
                      "aria-hidden": "true"
                    })]
                  })
                })
              }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
                className: "flex-shrink-0 px-4 flex items-center",
                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
                  name: "flanksource",
                  className: "h-8 w-auto"
                })
              }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
                className: "mt-5 flex-1 h-0 overflow-y-auto",
                children: /*#__PURE__*/(0, _jsxRuntime.jsx)("nav", {
                  className: "px-2 space-y-1",
                  children: navigation.map(function (item) {
                    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactRouterDom.NavLink, {
                      to: item.href,
                      className: "text-gray-600 hover:bg-gray-50 hover:text-gray-900 group rounded-md py-2 px-2 flex items-center text-base font-medium",
                      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(item.icon, {
                        className: "text-gray-400 group-hover:text-gray-500 mr-4 flex-shrink-0 h-6 w-6",
                        "aria-hidden": "true"
                      }), item.name]
                    }, item.name);
                  })
                })
              })]
            })
          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
            className: "flex-shrink-0 w-14"
          })]
        })
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
        className: (0, _clsx.default)("transform duration-500 w-14 z-20", {
          "lg:w-64": !collapseSidebar
        }),
        ref: innerRef,
        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
          className: (0, _clsx.default)("h-full transform duration-500 w-14", {
            "w-64": !collapseSidebar
          }),
          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
            type: "button",
            className: (0, _clsx.default)("absolute bg-white -right-2 top-14 border border-gray-300 rounded-full transform duration-500", {
              "rotate-180": !collapseSidebar
            }),
            onClick: function onClick() {
              return setCollapseSidebar(function (value) {
                return !value;
              });
            },
            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_io.IoChevronForwardOutline, {})
          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
            className: "h-full border-r border-gray-200 pt-5 flex flex-col flex-grow bg-white overflow-hidden",
            children: [collapseSidebar ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
              className: "w-14",
              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
                name: "flanksource-icon",
                className: "px-3 w-auto h-auto"
              })
            }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
              name: "flanksource",
              className: "w-auto h-auto px-4"
            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
              className: "flex-grow mt-5 flex flex-col",
              children: /*#__PURE__*/(0, _jsxRuntime.jsx)("nav", {
                className: "flex-1 px-2 pb-4 space-y-1",
                children: navigation.map(function (item) {
                  return /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
                    "data-tip": item.name,
                    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactRouterDom.NavLink, {
                      to: item.href,
                      className: classNames(item.current ? "bg-gray-100 text-gray-900" : "text-gray-600 hover:bg-gray-50 hover:text-gray-900", "group rounded-md py-2 px-2 flex items-center text-sm font-medium"),
                      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(item.icon, {
                        className: classNames(item.current ? "text-gray-500" : "text-gray-400 group-hover:text-gray-500", "mr-3 flex-shrink-0 h-6 w-6"),
                        "aria-hidden": "true"
                      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
                        className: (0, _clsx.default)("duration-300 transition-opacity", {
                          "opacity-0": collapseSidebar
                        }),
                        children: item.name
                      })]
                    }, item.name)
                  }, item.name);
                })
              })
            })]
          })]
        })
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactRouterDom.Outlet, {})]
    })]
  });
}