import { _objectSpread2 } from "../../../../../_virtual/_@oxc-project_runtime@0.122.0/helpers/objectSpread2.js";
import ClassicLayout from "../../../../classicLayout/index.js";
import Cover from "./components/Cover/index.js";
import Title from "./components/Title/index.js";
import RenderFields from "./components/RenderFields/index.js";
import React, { useMemo } from "react";
import { isFunction } from "@pisell/utils";
import "./index.less";
//#region src/components/table/Gallery/components/GalleryItem/index.tsx
const prefix = "pisell-lowcode-";
const GalleryItem = (props) => {
	const { record, gallery, columnsMap, index, gallerySetting, columns, onClick } = props;
	const { coverField, coverObjectFit, compactMode, isShowLabel: propsIsShowLabel } = gallerySetting || {};
	const { cover, title, header, content, footer } = gallery;
	const { fields: headerFields, slot } = header || {};
	const { fields: contentFields, showLabel: contentShowLabel } = content || {};
	const { render, height } = footer || {};
	const coverDom = useMemo(() => {
		return cover.show && coverField !== "noCover" && /* @__PURE__ */ React.createElement(Cover, {
			record,
			cover,
			coverField,
			coverObjectFit
		});
	}, [
		record,
		cover,
		coverField,
		coverObjectFit
	]);
	const titleDom = useMemo(() => {
		return /* @__PURE__ */ React.createElement(Title, _objectSpread2({
			columnsMap,
			record
		}, title));
	}, [
		record,
		title,
		columnsMap
	]);
	const Header = useMemo(() => {
		return /* @__PURE__ */ React.createElement("div", { className: `${prefix}header-wrap` }, coverDom, titleDom, headerFields.show && /* @__PURE__ */ React.createElement(RenderFields, {
			record,
			showMode: "block",
			columnsMap,
			fields: headerFields.list,
			isShowLabel: true
		}), slot && slot(record, index));
	}, [
		coverDom,
		columnsMap,
		record,
		cover,
		title,
		headerFields.show,
		headerFields.list,
		slot,
		index
	]);
	const { fixedHeader, fixedFooter } = useMemo(() => {
		if (gallery.fixedHeight) return {
			fixedHeader: gallery.fixedHeader,
			fixedFooter: gallery.fixedFooter
		};
		return {
			fixedHeader: false,
			fixedFooter: false
		};
	}, [
		gallery.fixedHeight,
		gallery.fixedHeader,
		gallery.fixedFooter
	]);
	const contentIsShowLabel = useMemo(() => {
		if (typeof contentShowLabel === "boolean") return contentShowLabel;
		return true;
	}, [contentShowLabel]);
	const { showMode, isShowLabel } = useMemo(() => {
		if (compactMode === "compact") return {
			showMode: "inline",
			isShowLabel: false
		};
		else if (compactMode === "default") return {
			showMode: "block",
			isShowLabel: contentIsShowLabel ? propsIsShowLabel : contentIsShowLabel
		};
		return {
			showMode: "block",
			isShowLabel: propsIsShowLabel
		};
	}, [
		compactMode,
		propsIsShowLabel,
		contentIsShowLabel
	]);
	const Content = useMemo(() => {
		const showFieldList = [];
		columns.forEach((item) => {
			if (item.isShow) showFieldList.push(item.key);
		});
		return /* @__PURE__ */ React.createElement(RenderFields, {
			record,
			showMode,
			columnsMap,
			fields: showFieldList,
			isShowLabel
		});
	}, [
		contentFields,
		record,
		columnsMap,
		showMode,
		isShowLabel,
		columns
	]);
	const Footer = useMemo(() => {
		return render && render(record, index);
	}, [record, index]);
	return /* @__PURE__ */ React.createElement("div", {
		className: `${prefix}gallery-item-wrap`,
		onClick
	}, /* @__PURE__ */ React.createElement(ClassicLayout, {
		fixedHeader,
		fixedFooter,
		header: Header,
		content: Content,
		footer: Footer,
		footerStyle: { height: isFunction(render) ? height : 0 }
	}));
};
//#endregion
export { GalleryItem as default };
