"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.SidebarWrap = exports.SidebarListType = void 0;
var _react = _interopRequireWildcard(require("react"));
var _styled = _interopRequireDefault(require("@modern-js/runtime/styled"));
var _reactI18next = require("react-i18next");
var _uuid = require("../utils\\uuid");
var _jsxRuntime = require("react/jsx-runtime");
let _ = t => t,
  _t,
  _t2,
  _t3,
  _t4;
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && 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; }
let SidebarListType;
exports.SidebarListType = SidebarListType;
(function (SidebarListType) {
  SidebarListType["DropDown"] = "DropDown";
  SidebarListType["Label"] = "Label";
})(SidebarListType || (exports.SidebarListType = SidebarListType = {}));
const TitleWrap = _styled.default.div(_t || (_t = _`
  .title${0} {
    display: flex;
    font-size: 14px;
    color: rgba(0, 0, 0, 1);
    justify-content: flex-start;
    margin: 5px 0;
    flex-direction: column;
    flex-wrap: nowrap;
  }

  .title${0} {
    display: flex;
    font-size: 12px;
    cursor: pointer;
    color: rgba(0, 0, 0, 1);
    justify-content: flex-start;
    margin: 5px 0;
    flex-direction: column;
    flex-wrap: nowrap;
    ${0}
  }
`), SidebarListType.Label, SidebarListType.DropDown, props => props.show ? '' : '.childContainer{ display: none}');
const SidebarWrap = _styled.default.div(_t2 || (_t2 = _`
  display: flex;
  position: ${0};
  top: 50px;
  flex-direction: column;
  width: 100%;
  left: 20px;
  .optionContainer {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  .sidebarContentContainer {
    display: flex;
    width: 100%;
    flex-direction: ${0};
    justify-content: space-between;
  }
  .content {
    width: calc(
      100% / ${0} -
        ${0}px
    );
  }
`), props => props.fix ? 'fixed' : 'content', props => props.contentsSortByRow ? 'row' : 'column', props => props.rowNumber, props => props.rowNumber < 2 ? 0 : 10);
exports.SidebarWrap = SidebarWrap;
const SelectWrap = _styled.default.div(_t3 || (_t3 = _`
  .childContainer {
    background: ${0};
  }
`), props => props.select ? '#f6f6f6 ' : ' rgba(0, 0, 0, 0)');
const ChildWrap = _styled.default.div(_t4 || (_t4 = _`
  .childContainer:hover {
    background: #f6f6f6 !important;
  }
  .childContainer {
    position: relative;
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-pack: start !important;
    -ms-flex-pack: start !important;
    -webkit-justify-content: flex-start !important;
    justify-content: flex-start !important;
    -webkit-align-items: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 135px;
    height: 37px;
    border-radius: 10px;
    margin: 5px 0;
    width: 149px;
    padding-left: 5px;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    cursor: pointer;
  }

  .child {
    max-width: calc(100% - 10px);
    height: 21px;
    line-height: 21px;
    font-size: 14px;
    margin-left: 5px;
    font-family: Poppins-SemiBold;
    color: #000000;
  }
`));
const SidebarLayout = ({
  listItems,
  defaultSelectId,
  contents,
  topSharedContent,
  fix: _fix = true,
  contentsSortByRow: _contentsSortByRow = true
}) => {
  const {
    t
  } = (0, _reactI18next.useTranslation)();
  const [selectId, setSelectId] = (0, _react.useState)(listItems[0].self.id);
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(SidebarWrap, {
    fix: _fix,
    contentsSortByRow: _contentsSortByRow,
    rowNumber: contents.length === 0 ? 1 : contents.length,
    children: [
    // left options
    listItems.map(item => {
      var _item$children;
      return /*#__PURE__*/(0, _jsxRuntime.jsx)(TitleWrap, {
        show: item.self.id === selectId,
        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
          className: `title${item.self.type ? item.self.type : SidebarListType.Label}`,
          onClick: () => {
            var _item$self$onClick, _item$self;
            (_item$self$onClick = (_item$self = item.self).onClick) === null || _item$self$onClick === void 0 ? void 0 : _item$self$onClick.call(_item$self);
            setSelectId(item.self.id);
          },
          children: [t(item.self.name), /*#__PURE__*/(0, _jsxRuntime.jsx)(ChildWrap, {
            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
              className: "optionContainer",
              children: (_item$children = item.children) === null || _item$children === void 0 ? void 0 : _item$children.map(cItem => {
                return cItem.customOptionElement ? cItem.customOptionElement : /*#__PURE__*/(0, _jsxRuntime.jsx)(SelectWrap, {
                  select: defaultSelectId === cItem.id,
                  children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
                    className: "childContainer",
                    onClick: () => {
                      var _cItem$onClick;
                      (_cItem$onClick = cItem.onClick) === null || _cItem$onClick === void 0 ? void 0 : _cItem$onClick.call(cItem, cItem.id);
                    },
                    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
                      className: "child",
                      children: t(cItem.name)
                    })
                  })
                }, `SelectWrap${(0, _uuid.uuid)()}`);
              })
            })
          })]
        })
      }, `listItem${(0, _uuid.uuid)()}`);
    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
      className: "sidebarContentContainer",
      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
        className: "content",
        children: [topSharedContent, contents[0] ? contents[0] : []]
      }), contents.length > 1 ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
        className: "content",
        children: contents.filter((v, i) => i !== 0).map(el => el)
      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {})]
    })]
  });
};
var _default = /*#__PURE__*/(0, _react.memo)(SidebarLayout);
exports.default = _default;