import { _objectSpread2 } from "../../_virtual/_@oxc-project_runtime@0.122.0/helpers/objectSpread2.js";
import { _objectWithoutProperties } from "../../_virtual/_@oxc-project_runtime@0.122.0/helpers/objectWithoutProperties.js";
import useResponsive from "../../hooks/useResponsive.js";
import Pagination$1 from "../Pagination/index.js";
import PisellEmpty from "../pisellEmpty/index.js";
import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useState } from "react";
import { getUniqueId } from "@pisell/utils";
import { Badge, Col, List, Row, Skeleton } from "antd";
import { CloseOutlined } from "@ant-design/icons";
import InfiniteScroll from "react-infinite-scroll-component";
import "./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 = _objectWithoutProperties(props, _excluded);
	useEffect(() => {
		document.body.id = "body";
	}, []);
	const responsive = useResponsive();
	const [detailModalShow, setDetailModalShow] = useState(false);
	useImperativeHandle(ref, () => ({ closeDetailModal: () => {
		setDetailModalShow(false);
	} }));
	const detailModalDisplay = useMemo(() => {
		if (responsive === "pc") return pcDetailModalDisplay;
		else if (responsive === "ipad") return padDetailModalDisplay;
		else if (responsive === "phone") return mobilePadDetailModalDisplay;
	}, [
		responsive,
		pcDetailModalDisplay,
		padDetailModalDisplay,
		mobilePadDetailModalDisplay
	]);
	const _footer = useMemo(() => {
		if (!(pagination && paginationType === "default") && !footer) return null;
		return /* @__PURE__ */ React.createElement(React.Fragment, null, pagination && paginationType === "default" && /* @__PURE__ */ React.createElement(Pagination$1, _objectSpread2({ showLessItems: true }, pagination)), footer);
	}, [pagination, footer]);
	const _renderItem = useCallback((item) => {
		return /* @__PURE__ */ React.createElement("div", {
			onClick: () => {
				setDetailModalShow(true);
				onRowClick(item);
			},
			style: { marginBottom: listGap }
		}, renderItem(item));
	}, [renderItem]);
	const _leftSpan = useMemo(() => {
		if (detailModalDisplay) return 24;
		return leftSpan;
	}, [leftSpan, detailModalDisplay]);
	const emptyDom = useMemo(() => {
		if (dataSource.length > 0) return null;
		return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(PisellEmpty, { description: locale === null || locale === void 0 ? void 0 : locale.emptyText }));
	}, [
		props.dataSource,
		locale,
		emptyButtons
	]);
	const scrollListId = useMemo(() => {
		return `scrollableDiv-${getUniqueId()}`;
	}, []);
	const list = useMemo(() => {
		if (paginationType === "scroll") return /* @__PURE__ */ React.createElement("div", { className: `${prefix}scroll-left-wrap` }, header && /* @__PURE__ */ React.createElement("div", { className: `${prefix}scroll-header-wrap` }, header), /* @__PURE__ */ React.createElement("div", {
			id: scrollListId,
			style: {
				height: listHeight || 400,
				overflow: "auto"
			},
			className: `${prefix}scroll-content-wrap`
		}, /* @__PURE__ */ React.createElement(InfiniteScroll, {
			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.createElement(Skeleton, {
				avatar: true,
				paragraph: { rows: 1 },
				active: true,
				className: `${prefix}scroll-skeleton`
			}),
			scrollableTarget: scrollListId
		}, /* @__PURE__ */ React.createElement(List, _objectSpread2(_objectSpread2({}, others), {}, {
			dataSource,
			renderItem: _renderItem
		}), emptyDom))), _footer && /* @__PURE__ */ React.createElement("div", { className: `${prefix}scroll-footer-wrap` }, _footer));
		if (doubleList && doubleListSource.length > 0) return /* @__PURE__ */ React.createElement("div", { className: `${prefix}record-view-double-list` }, doubleListSource.map((item) => {
			const { dataSource = [], title } = item;
			return /* @__PURE__ */ React.createElement("div", { className: `${prefix}record-view-double-list-item` }, /* @__PURE__ */ React.createElement("div", { className: `${prefix}record-view-double-list-item-title` }, title, !!dataSource.length && /* @__PURE__ */ React.createElement(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.createElement(List, _objectSpread2(_objectSpread2({}, others), {}, {
				dataSource,
				renderItem: _renderItem,
				footer: _footer
			}), emptyDom));
		}));
		return /* @__PURE__ */ React.createElement(List, _objectSpread2(_objectSpread2({}, others), {}, {
			dataSource,
			renderItem: _renderItem,
			header,
			footer: _footer
		}), emptyDom);
	}, [
		props,
		_renderItem,
		_footer
	]);
	return /* @__PURE__ */ React.createElement(Row, {
		gutter,
		style,
		className: `${prefix}record-view`
	}, /* @__PURE__ */ React.createElement(Col, {
		span: _leftSpan,
		className: `${prefix}record-view-left`
	}, list), !detailModalDisplay && /* @__PURE__ */ React.createElement(Col, { span: rightSpan }, detail), detailModalShow && detailModalDisplay && /* @__PURE__ */ React.createElement("div", {
		className: `${prefix}detail-modal-wrap`,
		style: modalWrapStyle
	}, isShowClode && /* @__PURE__ */ React.createElement("div", { className: `${prefix}modal-header` }, /* @__PURE__ */ React.createElement(CloseOutlined, {
		className: `${prefix}close-icon`,
		onClick: () => setDetailModalShow(false)
	})), detail));
};
var record_view_default = forwardRef(RecordView);
//#endregion
export { record_view_default as default };
