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, { memo, useCallback, useEffect, useMemo } from 'react';
import { Form, Spin } from 'antd';
import { isFunction } from '@pisell/utils';
import { FormPagination } from "../../Pagination";
import useTransDataSource from "../hooks/useTransDataSource";
import { useSharedState } from "../../../hooks";
import { Context } from "../model";
import VirtualGrid from "./components/VirtualGrid";
import GalleryItem from "./components/GalleryItem";
import { FIELD_LABEL_HEIGHT, FIELD_VALUE_HEIGHT, TITLE_LENE_HEIGHT, TITLE_VERTICAL_SPACING } from "./constant";
import "./index.less";
var prefix = 'pisell-lowcode-';
var Gallery = function Gallery(props) {
  var gallery = props.gallery,
    filter = props.filter,
    pagination = props.pagination,
    rowKey = props.rowKey,
    loading = props.loading,
    onDataSourceChange = props.onDataSourceChange;
  var _ref = gallery || {},
    horizontalGutter = _ref.horizontalGutter,
    verticalGutter = _ref.verticalGutter,
    cardMinWidth = _ref.cardMinWidth,
    cardMaxWidth = _ref.cardMaxWidth,
    cardHeight = _ref.cardHeight,
    fixedHeight = _ref.fixedHeight,
    cover = _ref.cover,
    title = _ref.title,
    header = _ref.header,
    footer = _ref.footer,
    onItem = _ref.onItem;
  var _useSharedState = useSharedState(Context),
    state = _useSharedState.state;
  var form = Form.useFormInstance();
  var column_setting = Form.useWatch('column_setting', {
    form: form,
    preserve: true
  }) || [];
  var gallery_setting = Form.useWatch(['gallery_setting'], {
    form: form,
    preserve: true
  }) || {};
  var originDataSource = state.originDataSource,
    originColumns = state.originColumns;
  var dataSource = useTransDataSource({
    dataSource: originDataSource,
    form: form,
    localPagination: !!(pagination !== null && pagination !== void 0 && pagination.localPagination),
    rowKey: rowKey,
    filter: filter
  });
  useEffect(function () {
    onDataSourceChange === null || onDataSourceChange === void 0 || onDataSourceChange(dataSource);
  }, [JSON.stringify(dataSource)]);
  var columnsMap = useMemo(function () {
    return new Map(originColumns.map(function (item) {
      return [item.key, item];
    }));
  }, [originColumns]);
  var renderItem = useCallback(function (record, index) {
    return /*#__PURE__*/React.createElement(GalleryItem, {
      onClick: function onClick() {
        return onItem === null || onItem === void 0 ? void 0 : onItem(record, index);
      },
      columns: column_setting,
      gallerySetting: gallery_setting,
      record: record,
      gallery: gallery,
      columnsMap: columnsMap,
      index: index
    });
  }, [gallery_setting, gallery, columnsMap, column_setting]);

  // 总数
  var total = useMemo(function () {
    return pagination === null || pagination === void 0 ? void 0 : pagination.total;
  }, [pagination]);
  var gap = useMemo(function () {
    return [horizontalGutter, verticalGutter];
  }, [horizontalGutter, verticalGutter]);
  var rowHeight = useMemo(function () {
    var _header$fields;
    if (fixedHeight) {
      return cardHeight;
    }
    var coverHeight = 0;
    var titleHeight = 0;
    var headerFieldHeight = 0;
    var contentHeight = 0;
    var footerHeight = 0;
    if (cover.show && (gallery_setting === null || gallery_setting === void 0 ? void 0 : gallery_setting.coverField) !== 'noCover') {
      coverHeight = cover.height;
    }
    if (title.field) {
      titleHeight = TITLE_LENE_HEIGHT * title.line + TITLE_VERTICAL_SPACING * 2;
    }
    if (header !== null && header !== void 0 && (_header$fields = header.fields) !== null && _header$fields !== void 0 && _header$fields.show) {
      headerFieldHeight = (FIELD_LABEL_HEIGHT + FIELD_VALUE_HEIGHT) * header.fields.list.length;
    }
    if (column_setting) {
      var fieldCount = column_setting.filter(function (item) {
        return item.isShow;
      }).length;
      var itemHeight = gallery_setting.isShowLabel && gallery_setting.compactMode !== 'compact' ? FIELD_LABEL_HEIGHT + FIELD_VALUE_HEIGHT : FIELD_VALUE_HEIGHT;
      contentHeight = itemHeight * fieldCount;
      if (gallery_setting.compactMode === 'compact') {
        contentHeight = contentHeight * 0.8;
      }
    }
    if (isFunction(footer === null || footer === void 0 ? void 0 : footer.render)) {
      footerHeight = footer.height;
    }
    return coverHeight + titleHeight + headerFieldHeight + contentHeight + footerHeight;
  }, [cardHeight, fixedHeight, cover, title, gallery_setting, column_setting, header, footer]);
  return /*#__PURE__*/React.createElement(Spin, {
    spinning: loading,
    wrapperClassName: "".concat(prefix, "gallery-spin")
  }, /*#__PURE__*/React.createElement("div", {
    className: "".concat(prefix, "gallery-wrap")
  }, /*#__PURE__*/React.createElement(VirtualGrid, {
    paddingTop: 4,
    itemMinWidth: cardMinWidth,
    itemMaxWidth: cardMaxWidth,
    dataSource: dataSource,
    renderItem: renderItem,
    gap: gap,
    rowHeight: rowHeight
  }), !pagination.localPagination && /*#__PURE__*/React.createElement(Form.Item, {
    name: "pagination",
    style: {
      margin: 0,
      position: 'absolute',
      bottom: 0,
      left: 0,
      right: 0
    }
  }, /*#__PURE__*/React.createElement(FormPagination, _extends({}, pagination, {
    total: total
  })))));
};
export default /*#__PURE__*/memo(Gallery);