const require_runtime = require("../../_virtual/_rolldown/runtime.js");
const require_objectSpread2 = require("../../_virtual/_@oxc-project_runtime@0.122.0/helpers/objectSpread2.js");
const require_objectWithoutProperties = require("../../_virtual/_@oxc-project_runtime@0.122.0/helpers/objectWithoutProperties.js");
const require_useResponsive = require("../../hooks/useResponsive.js");
const require_index = require("../Pagination/index.js");
const require_index$1 = require("../pisellEmpty/index.js");
let react = require("react");
react = require_runtime.__toESM(react);
let _pisell_utils = require("@pisell/utils");
let antd = require("antd");
let _ant_design_icons = require("@ant-design/icons");
let react_infinite_scroll_component = require("react-infinite-scroll-component");
react_infinite_scroll_component = require_runtime.__toESM(react_infinite_scroll_component);
require("./index.less");
//#region src/components/record-view/index.tsx
const _excluded = [
	"detail",
	"leftSpan",
	"rightSpan",
	"gutter",
	"style",
	"pagination",
	"header",
	"footer",
	"renderItem",
	"onRowClick",
	"paginationType",
	"listGap",
	"loadMoreData",
	"listHeight",
	"pcDetailModalDisplay",
	"padDetailModalDisplay",
	"mobilePadDetailModalDisplay",
	"children",
	"locale",
	"emptyButtons",
	"doubleList",
	"dataSource",
	"split",
	"isShowClode",
	"doubleListSource",
	"modalWrapStyle"
];
const prefix = "pisell-lowcode-";
const RecordView = (props, ref) => {
	const { detail, leftSpan, rightSpan, gutter, style, pagination, header, footer, renderItem, onRowClick, paginationType, listGap, loadMoreData, listHeight, pcDetailModalDisplay, padDetailModalDisplay, mobilePadDetailModalDisplay, children, locale, emptyButtons = [], doubleList = false, dataSource = [], split, isShowClode = true, doubleListSource = [], modalWrapStyle = {} } = props, others = require_objectWithoutProperties._objectWithoutProperties(props, _excluded);
	(0, react.useEffect)(() => {
		document.body.id = "body";
	}, []);
	const responsive = require_useResponsive.default();
	const [detailModalShow, setDetailModalShow] = (0, react.useState)(false);
	(0, react.useImperativeHandle)(ref, () => ({ closeDetailModal: () => {
		setDetailModalShow(false);
	} }));
	const detailModalDisplay = (0, react.useMemo)(() => {
		if (responsive === "pc") return pcDetailModalDisplay;
		else if (responsive === "ipad") return padDetailModalDisplay;
		else if (responsive === "phone") return mobilePadDetailModalDisplay;
	}, [
		responsive,
		pcDetailModalDisplay,
		padDetailModalDisplay,
		mobilePadDetailModalDisplay
	]);
	const _footer = (0, react.useMemo)(() => {
		if (!(pagination && paginationType === "default") && !footer) return null;
		return /* @__PURE__ */ react.default.createElement(react.default.Fragment, null, pagination && paginationType === "default" && /* @__PURE__ */ react.default.createElement(require_index.default, require_objectSpread2._objectSpread2({ showLessItems: true }, pagination)), footer);
	}, [pagination, footer]);
	const _renderItem = (0, react.useCallback)((item) => {
		return /* @__PURE__ */ react.default.createElement("div", {
			onClick: () => {
				setDetailModalShow(true);
				onRowClick(item);
			},
			style: { marginBottom: listGap }
		}, renderItem(item));
	}, [renderItem]);
	const _leftSpan = (0, react.useMemo)(() => {
		if (detailModalDisplay) return 24;
		return leftSpan;
	}, [leftSpan, detailModalDisplay]);
	const emptyDom = (0, react.useMemo)(() => {
		if (dataSource.length > 0) return null;
		return /* @__PURE__ */ react.default.createElement(react.default.Fragment, null, /* @__PURE__ */ react.default.createElement(require_index$1.default, { description: locale === null || locale === void 0 ? void 0 : locale.emptyText }));
	}, [
		props.dataSource,
		locale,
		emptyButtons
	]);
	const scrollListId = (0, react.useMemo)(() => {
		return `scrollableDiv-${(0, _pisell_utils.getUniqueId)()}`;
	}, []);
	const list = (0, react.useMemo)(() => {
		if (paginationType === "scroll") return /* @__PURE__ */ react.default.createElement("div", { className: `${prefix}scroll-left-wrap` }, header && /* @__PURE__ */ react.default.createElement("div", { className: `${prefix}scroll-header-wrap` }, header), /* @__PURE__ */ react.default.createElement("div", {
			id: scrollListId,
			style: {
				height: listHeight || 400,
				overflow: "auto"
			},
			className: `${prefix}scroll-content-wrap`
		}, /* @__PURE__ */ react.default.createElement(react_infinite_scroll_component.default, {
			dataLength: props.dataSource.length,
			next: loadMoreData,
			hasMore: props.dataSource.length < ((pagination === null || pagination === void 0 ? void 0 : pagination.total) || 999999),
			loader: props.dataSource.length > 0 && /* @__PURE__ */ react.default.createElement(antd.Skeleton, {
				avatar: true,
				paragraph: { rows: 1 },
				active: true,
				className: `${prefix}scroll-skeleton`
			}),
			scrollableTarget: scrollListId
		}, /* @__PURE__ */ react.default.createElement(antd.List, require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, others), {}, {
			dataSource,
			renderItem: _renderItem
		}), emptyDom))), _footer && /* @__PURE__ */ react.default.createElement("div", { className: `${prefix}scroll-footer-wrap` }, _footer));
		if (doubleList && doubleListSource.length > 0) return /* @__PURE__ */ react.default.createElement("div", { className: `${prefix}record-view-double-list` }, doubleListSource.map((item) => {
			const { dataSource = [], title } = item;
			return /* @__PURE__ */ react.default.createElement("div", { className: `${prefix}record-view-double-list-item` }, /* @__PURE__ */ react.default.createElement("div", { className: `${prefix}record-view-double-list-item-title` }, title, !!dataSource.length && /* @__PURE__ */ react.default.createElement(antd.Badge, {
				color: "var(--gray-50, #F9FAFB)",
				style: {
					marginLeft: 12,
					border: "1px solid var(--gray-200, #EAECF0)",
					color: "var(--gray-700, #344054)"
				},
				count: dataSource.length
			})), /* @__PURE__ */ react.default.createElement(antd.List, require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, others), {}, {
				dataSource,
				renderItem: _renderItem,
				footer: _footer
			}), emptyDom));
		}));
		return /* @__PURE__ */ react.default.createElement(antd.List, require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, others), {}, {
			dataSource,
			renderItem: _renderItem,
			header,
			footer: _footer
		}), emptyDom);
	}, [
		props,
		_renderItem,
		_footer
	]);
	return /* @__PURE__ */ react.default.createElement(antd.Row, {
		gutter,
		style,
		className: `${prefix}record-view`
	}, /* @__PURE__ */ react.default.createElement(antd.Col, {
		span: _leftSpan,
		className: `${prefix}record-view-left`
	}, list), !detailModalDisplay && /* @__PURE__ */ react.default.createElement(antd.Col, { span: rightSpan }, detail), detailModalShow && detailModalDisplay && /* @__PURE__ */ react.default.createElement("div", {
		className: `${prefix}detail-modal-wrap`,
		style: modalWrapStyle
	}, isShowClode && /* @__PURE__ */ react.default.createElement("div", { className: `${prefix}modal-header` }, /* @__PURE__ */ react.default.createElement(_ant_design_icons.CloseOutlined, {
		className: `${prefix}close-icon`,
		onClick: () => setDetailModalShow(false)
	})), detail));
};
var record_view_default = (0, react.forwardRef)(RecordView);
//#endregion
exports.default = record_view_default;
