function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
import React, { useMemo } from "react";
import { isFunction } from "@pisell/utils";
import Cover from "./components/Cover";
import Title from "./components/Title";
import ClassicLayout from "../../../../classicLayout";
import RenderFields from "./components/RenderFields";
import "./index.less";
var prefix = "pisell-lowcode-";
var GalleryItem = function GalleryItem(props) {
  var record = props.record,
    gallery = props.gallery,
    columnsMap = props.columnsMap,
    index = props.index,
    gallerySetting = props.gallerySetting,
    columns = props.columns,
    onClick = props.onClick;
  var _ref = gallerySetting || {},
    coverField = _ref.coverField,
    coverObjectFit = _ref.coverObjectFit,
    compactMode = _ref.compactMode,
    propsIsShowLabel = _ref.isShowLabel;
  var cover = gallery.cover,
    title = gallery.title,
    header = gallery.header,
    content = gallery.content,
    footer = gallery.footer;
  var _ref2 = header || {},
    headerFields = _ref2.fields,
    slot = _ref2.slot;
  var _ref3 = content || {},
    contentFields = _ref3.fields;
  var _ref4 = footer || {},
    render = _ref4.render,
    height = _ref4.height;
  var coverDom = useMemo(function () {
    return cover.show && coverField !== "noCover" && /*#__PURE__*/React.createElement(Cover, {
      record: record,
      cover: cover,
      coverField: coverField,
      coverObjectFit: coverObjectFit
    });
  }, [record, cover, coverField, coverObjectFit]);
  var titleDom = useMemo(function () {
    return /*#__PURE__*/React.createElement(Title, _extends({
      columnsMap: columnsMap,
      record: record
    }, title));
  }, [record, title, columnsMap]);
  var Header = useMemo(function () {
    return /*#__PURE__*/React.createElement("div", {
      className: "".concat(prefix, "header-wrap")
    }, coverDom, titleDom, headerFields.show && /*#__PURE__*/React.createElement(RenderFields, {
      record: record,
      showMode: "block",
      columnsMap: columnsMap,
      fields: headerFields.list,
      isShowLabel: true
    }), slot && slot(record, index));
  }, [coverDom, columnsMap, record, cover, title, headerFields.show, headerFields.list, slot, index]);
  var _useMemo = useMemo(function () {
      if (gallery.fixedHeight) {
        return {
          fixedHeader: gallery.fixedHeader,
          fixedFooter: gallery.fixedFooter
        };
      }
      return {
        fixedHeader: false,
        fixedFooter: false
      };
    }, [gallery.fixedHeight, gallery.fixedHeader, gallery.fixedFooter]),
    fixedHeader = _useMemo.fixedHeader,
    fixedFooter = _useMemo.fixedFooter;
  var _useMemo2 = useMemo(function () {
      if (compactMode === "compact") {
        return {
          showMode: "inline",
          isShowLabel: false
        };
      } else if (compactMode === "default") {
        return {
          showMode: "block",
          isShowLabel: propsIsShowLabel
        };
      }
      return {
        showMode: "block",
        isShowLabel: propsIsShowLabel
      };
    }, [compactMode, propsIsShowLabel]),
    showMode = _useMemo2.showMode,
    isShowLabel = _useMemo2.isShowLabel;
  var Content = useMemo(function () {
    var showFieldList = [];
    columns.forEach(function (item) {
      if (item.isShow) {
        showFieldList.push(item.key);
      }
    });
    return /*#__PURE__*/React.createElement(RenderFields, {
      record: record,
      showMode: showMode,
      columnsMap: columnsMap,
      fields: showFieldList,
      isShowLabel: isShowLabel
    });
  }, [contentFields, record, columnsMap, showMode, isShowLabel, columns]);
  var Footer = useMemo(function () {
    return render && render(record, index);
  }, [record, index]);
  return /*#__PURE__*/React.createElement("div", {
    className: "".concat(prefix, "gallery-item-wrap"),
    onClick: onClick
  }, /*#__PURE__*/React.createElement(ClassicLayout, {
    fixedHeader: fixedHeader,
    fixedFooter: fixedFooter,
    header: Header,
    content: Content,
    footer: Footer,
    footerStyle: {
      height: isFunction(render) ? height : 0
    }
  }));
};
export default GalleryItem;