import { VmWrapper } from "../../../_components";
import VtxBaseModal from "../../../vtx-base-modal";
import { BaseService } from "../../api";
import PreviewAndDownload from "./PreviewAndDownload";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
var Content = function Content(_ref) {
  var info = _ref.info,
    theme = _ref.theme;
  var id = info.id;
  var _BaseService$useGetKn = BaseService.useGetKnowledgeBase(id),
    data = _BaseService$useGetKn.data;
  var content = data.content,
    title = data.title,
    knowledgeCategoryName = data.knowledgeCategoryName;
  var attachments = [];
  if (info.attachments) {
    attachments = JSON.parse(info.attachments);
  }
  return /*#__PURE__*/_jsx(VmWrapper, {
    showTitle: false,
    children: /*#__PURE__*/_jsxs("div", {
      style: {
        height: 'calc(100vh - 70px)'
      },
      children: [/*#__PURE__*/_jsx("h2", {
        style: {
          marginBottom: 12,
          textAlign: 'center',
          color: 'var(--modal-title-color)'
        },
        children: title
      }), /*#__PURE__*/_jsx("div", {
        style: {
          color: 'var(--gray-color)'
        },
        children: knowledgeCategoryName
      }), /*#__PURE__*/_jsx("div", {
        className: "w-e-text-container",
        children: /*#__PURE__*/_jsx("div", {
          dangerouslySetInnerHTML: {
            __html: content
          },
          "data-slate-editor": true
        })
      }), attachments.length > 0 ? attachments.map(function (item) {
        return /*#__PURE__*/_jsx(PreviewAndDownload, {
          data: item,
          theme: theme
        }, item.id);
      }) : null]
    })
  });
};
var KnowledgeBasesDetail = function KnowledgeBasesDetail(_ref2) {
  var title = _ref2.title,
    visible = _ref2.visible,
    onCancel = _ref2.onCancel,
    theme = _ref2.theme,
    info = _ref2.info;
  return visible ? /*#__PURE__*/_jsx(VtxBaseModal, {
    width: "100vw",
    height: "100vh",
    top: 0,
    left: 0,
    title: title,
    visible: visible,
    theme: theme,
    onCancel: onCancel,
    tabs: [{
      key: 'info'
    }],
    contents: {
      info: /*#__PURE__*/_jsx(Content, {
        info: info,
        theme: theme
      })
    },
    modalHeight: "100vh"
  }) : null;
};
export default KnowledgeBasesDetail;