import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
var _templateObject, _templateObject2, _templateObject3, _templateObject4;
import React, { memo, useState } from 'react';
import styled from '@modern-js/runtime/styled';
import { useTranslation } from 'react-i18next';
import { uuid } from "../utils\\uuid";
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
import { Fragment as _Fragment } from "react/jsx-runtime";
export var SidebarListType;
(function (SidebarListType) {
  SidebarListType["DropDown"] = "DropDown";
  SidebarListType["Label"] = "Label";
})(SidebarListType || (SidebarListType = {}));
var TitleWrap = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .title", " {\n    display: flex;\n    font-size: 14px;\n    color: rgba(0, 0, 0, 1);\n    justify-content: flex-start;\n    margin: 5px 0;\n    flex-direction: column;\n    flex-wrap: nowrap;\n  }\n\n  .title", " {\n    display: flex;\n    font-size: 12px;\n    cursor: pointer;\n    color: rgba(0, 0, 0, 1);\n    justify-content: flex-start;\n    margin: 5px 0;\n    flex-direction: column;\n    flex-wrap: nowrap;\n    ", "\n  }\n"])), SidebarListType.Label, SidebarListType.DropDown, function (props) {
  return props.show ? '' : '.childContainer{ display: none}';
});
export var SidebarWrap = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  position: ", ";\n  top: 50px;\n  flex-direction: column;\n  width: 100%;\n  left: 20px;\n  .optionContainer {\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n  }\n  .sidebarContentContainer {\n    display: flex;\n    width: 100%;\n    flex-direction: ", ";\n    justify-content: space-between;\n  }\n  .content {\n    width: calc(\n      100% / ", " -\n        ", "px\n    );\n  }\n"])), function (props) {
  return props.fix ? 'fixed' : 'content';
}, function (props) {
  return props.contentsSortByRow ? 'row' : 'column';
}, function (props) {
  return props.rowNumber;
}, function (props) {
  return props.rowNumber < 2 ? 0 : 10;
});
var SelectWrap = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  .childContainer {\n    background: ", ";\n  }\n"])), function (props) {
  return props.select ? '#f6f6f6 ' : ' rgba(0, 0, 0, 0)';
});
var ChildWrap = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  .childContainer:hover {\n    background: #f6f6f6 !important;\n  }\n  .childContainer {\n    position: relative;\n    display: -webkit-inline-box;\n    display: -webkit-inline-flex;\n    display: -ms-inline-flexbox;\n    display: inline-flex;\n    -webkit-box-pack: start !important;\n    -ms-flex-pack: start !important;\n    -webkit-justify-content: flex-start !important;\n    justify-content: flex-start !important;\n    -webkit-align-items: center;\n    -webkit-box-align: center;\n    -ms-flex-align: center;\n    align-items: center;\n    width: 135px;\n    height: 37px;\n    border-radius: 10px;\n    margin: 5px 0;\n    width: 149px;\n    padding-left: 5px;\n    -webkit-box-pack: center;\n    -ms-flex-pack: center;\n    -webkit-justify-content: center;\n    justify-content: center;\n    -webkit-align-items: center;\n    -webkit-box-align: center;\n    -ms-flex-align: center;\n    align-items: center;\n    cursor: pointer;\n  }\n\n  .child {\n    max-width: calc(100% - 10px);\n    height: 21px;\n    line-height: 21px;\n    font-size: 14px;\n    margin-left: 5px;\n    font-family: Poppins-SemiBold;\n    color: #000000;\n  }\n"])));
var SidebarLayout = function SidebarLayout(_ref) {
  var listItems = _ref.listItems,
    defaultSelectId = _ref.defaultSelectId,
    contents = _ref.contents,
    topSharedContent = _ref.topSharedContent,
    _ref$fix = _ref.fix,
    fix = _ref$fix === void 0 ? true : _ref$fix,
    _ref$contentsSortByRo = _ref.contentsSortByRow,
    contentsSortByRow = _ref$contentsSortByRo === void 0 ? true : _ref$contentsSortByRo;
  var _useTranslation = useTranslation(),
    t = _useTranslation.t;
  var _useState = useState(listItems[0].self.id),
    _useState2 = _slicedToArray(_useState, 2),
    selectId = _useState2[0],
    setSelectId = _useState2[1];
  return /*#__PURE__*/_jsxs(SidebarWrap, {
    fix: fix,
    contentsSortByRow: contentsSortByRow,
    rowNumber: contents.length === 0 ? 1 : contents.length,
    children: [
    // left options
    listItems.map(function (item) {
      var _item$children;
      return /*#__PURE__*/_jsx(TitleWrap, {
        show: item.self.id === selectId,
        children: /*#__PURE__*/_jsxs("div", {
          className: "title".concat(item.self.type ? item.self.type : SidebarListType.Label),
          onClick: function 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__*/_jsx(ChildWrap, {
            children: /*#__PURE__*/_jsx("div", {
              className: "optionContainer",
              children: (_item$children = item.children) === null || _item$children === void 0 ? void 0 : _item$children.map(function (cItem) {
                return cItem.customOptionElement ? cItem.customOptionElement : /*#__PURE__*/_jsx(SelectWrap, {
                  select: defaultSelectId === cItem.id,
                  children: /*#__PURE__*/_jsx("div", {
                    className: "childContainer",
                    onClick: function onClick() {
                      var _cItem$onClick;
                      (_cItem$onClick = cItem.onClick) === null || _cItem$onClick === void 0 ? void 0 : _cItem$onClick.call(cItem, cItem.id);
                    },
                    children: /*#__PURE__*/_jsx("div", {
                      className: "child",
                      children: t(cItem.name)
                    })
                  })
                }, "SelectWrap".concat(uuid()));
              })
            })
          })]
        })
      }, "listItem".concat(uuid()));
    }), /*#__PURE__*/_jsxs("div", {
      className: "sidebarContentContainer",
      children: [/*#__PURE__*/_jsxs("div", {
        className: "content",
        children: [topSharedContent, contents[0] ? contents[0] : []]
      }), contents.length > 1 ? /*#__PURE__*/_jsx("div", {
        className: "content",
        children: contents.filter(function (v, i) {
          return i !== 0;
        }).map(function (el) {
          return el;
        })
      }) : /*#__PURE__*/_jsx(_Fragment, {})]
    })]
  });
};
export default /*#__PURE__*/memo(SidebarLayout);