let _ = t => t,
  _t,
  _t2,
  _t3,
  _t4;
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 let SidebarListType;
(function (SidebarListType) {
  SidebarListType["DropDown"] = "DropDown";
  SidebarListType["Label"] = "Label";
})(SidebarListType || (SidebarListType = {}));
const TitleWrap = styled.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}');
export const SidebarWrap = styled.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);
const SelectWrap = styled.div(_t3 || (_t3 = _`
  .childContainer {
    background: ${0};
  }
`), props => props.select ? '#f6f6f6 ' : ' rgba(0, 0, 0, 0)');
const ChildWrap = styled.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
  } = useTranslation();
  const [selectId, setSelectId] = useState(listItems[0].self.id);
  return /*#__PURE__*/_jsxs(SidebarWrap, {
    fix: _fix,
    contentsSortByRow: _contentsSortByRow,
    rowNumber: contents.length === 0 ? 1 : contents.length,
    children: [
    // left options
    listItems.map(item => {
      var _item$children;
      return /*#__PURE__*/_jsx(TitleWrap, {
        show: item.self.id === selectId,
        children: /*#__PURE__*/_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__*/_jsx(ChildWrap, {
            children: /*#__PURE__*/_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__*/_jsx(SelectWrap, {
                  select: defaultSelectId === cItem.id,
                  children: /*#__PURE__*/_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__*/_jsx("div", {
                      className: "child",
                      children: t(cItem.name)
                    })
                  })
                }, `SelectWrap${uuid()}`);
              })
            })
          })]
        })
      }, `listItem${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((v, i) => i !== 0).map(el => el)
      }) : /*#__PURE__*/_jsx(_Fragment, {})]
    })]
  });
};
export default /*#__PURE__*/memo(SidebarLayout);