"use strict";

function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;

var _tslib = require("tslib");

var _react = _interopRequireWildcard(require("react"));

var _NavCollapseTrigger = _interopRequireDefault(require("./NavCollapseTrigger"));

var _classnames = _interopRequireDefault(require("classnames"));

var _index = _interopRequireDefault(require("../menu/index"));

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

function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

var useCollapse = function useCollapse(_a) {
  var defaultCollapsed = _a.defaultCollapsed,
      collapsed = _a.collapsed,
      onCollapseTriggerClick = _a.onCollapseTriggerClick,
      onMaskClick = _a.onMaskClick;
  var isControlled = typeof collapsed === 'boolean';

  var _b = (0, _react.useState)(defaultCollapsed),
      collapsedState = _b[0],
      setCollapsedState = _b[1]; // 是否是受控组件？


  var actualCollapsed = isControlled ? collapsed : collapsedState; // 装饰onCollapseTriggerClick，在受控模式下要设置当前collapsedState

  var actualOnCollapseTriggerClick = (0, _react.useCallback)(function (e, type) {
    type === "collapse" && onCollapseTriggerClick && onCollapseTriggerClick(!actualCollapsed, e);
    type === "mask" && onMaskClick && onMaskClick(!actualCollapsed, e);

    if (!isControlled) {
      setCollapsedState(!actualCollapsed);
    }
  }, [actualCollapsed, isControlled, onCollapseTriggerClick]);
  return [actualCollapsed, actualOnCollapseTriggerClick];
};

var Nav = function Nav(_a) {
  var className = _a.className,
      _b = _a.collapsible,
      collapsible = _b === void 0 ? true : _b,
      collapsed = _a.collapsed,
      _c = _a.defaultCollapsed,
      defaultCollapsed = _c === void 0 ? false : _c,
      onCollapseTriggerClick = _a.onCollapseTriggerClick,
      onMaskClick = _a.onMaskClick,
      nav = _a.nav,
      children = _a.children,
      width = _a.width,
      hasMask = _a.hasMask,
      _d = _a.type,
      type = _d === void 0 ? "normal" : _d,
      style = _a.style,
      _e = _a.offset,
      offset = _e === void 0 ? [0, 0] : _e,
      offsetWidth = _a.offsetWidth,
      offsetHeight = _a.offsetHeight;

  var _f = useCollapse({
    collapsed: collapsed,
    defaultCollapsed: defaultCollapsed,
    onCollapseTriggerClick: onCollapseTriggerClick,
    onMaskClick: onMaskClick
  }),
      derivedCollapsed = _f[0],
      derivedOnCollapseTriggerClick = _f[1];

  var left = offset[0],
      top = offset[1];
  var isDialog = type == "dialog";
  var style_ = isDialog ? (0, _tslib.__assign)({
    left: left,
    top: top,
    height: "calc(100vh - " + top + "px)",
    width: "calc(100vw - " + left + "px)"
  }, style) : style;
  style_ = offsetWidth ? (0, _tslib.__assign)((0, _tslib.__assign)({}, style_), {
    width: "calc(100vw - " + offsetWidth + "px)"
  }) : style_;
  style_ = offsetHeight ? (0, _tslib.__assign)((0, _tslib.__assign)({}, style_), {
    height: "calc(100vh - " + offsetHeight + "px)"
  }) : style_;
  return /*#__PURE__*/_react["default"].createElement("div", {
    className: "lp-silder-nav-container"
  }, /*#__PURE__*/_react["default"].createElement("div", {
    className: (0, _classnames["default"])("lp-silder-nav", {
      "top": isDialog
    }, {
      "hide": derivedCollapsed
    }, className),
    style: style_
  }, /*#__PURE__*/_react["default"].createElement("div", {
    className: (0, _classnames["default"])("main_nav", {
      "hide": derivedCollapsed
    }),
    style: {
      width: width
    }
  }, /*#__PURE__*/_react["default"].createElement("div", {
    className: "nav-childen-wrapper"
  }, nav ? /*#__PURE__*/_react["default"].createElement(_index["default"], (0, _tslib.__assign)({}, nav, {
    isSildeNav: true
  })) : null, children)), collapsible && /*#__PURE__*/_react["default"].createElement(_NavCollapseTrigger["default"], {
    collapsed: derivedCollapsed,
    onClick: function onClick(e) {
      return derivedOnCollapseTriggerClick(e, "collapse");
    }
  }), isDialog && hasMask && /*#__PURE__*/_react["default"].createElement("div", {
    className: "lp-silder-nav-mask",
    onClick: function onClick(e) {
      return derivedOnCollapseTriggerClick(e, "mask");
    }
  })));
};

var _default = Nav;
exports["default"] = _default;