import React, { useContext } from 'react';
import { Alert, Card, Empty, Pagination } from 'antd';
import { Link } from 'react-router-dom';
import { ImageLink } from '../Links';
import PageContext from '../../contexts/page';
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
import { Fragment as _Fragment } from "react/jsx-runtime";
const gridStyle = {
  width: '25%',
  textAlign: 'center'
};
const ImageCardTable = ({
  imgKey,
  dataSource,
  pagination,
  onChange
}) => {
  const {
    dbName,
    tableName,
    primaryKey
  } = useContext(PageContext);
  if (!imgKey) {
    return /*#__PURE__*/_jsx(Alert, {
      message: "Error",
      description: /*#__PURE__*/_jsxs("div", {
        children: ["Which column data to render the image list? Please define only one column with ", /*#__PURE__*/_jsx("code", {
          children: "ui:listPage:isImageViewKey: true"
        })]
      }),
      type: "error",
      showIcon: true
    });
  }
  return /*#__PURE__*/_jsxs("div", {
    className: "dbm-card-table",
    children: [/*#__PURE__*/_jsx(Card, {
      children: dataSource.slice((pagination.current - 1) * pagination.pageSize, pagination.current * pagination.pageSize).map((item, index) => {
        let el = null;
        switch (typeof item[imgKey]) {
          case 'undefined':
            el = /*#__PURE__*/_jsx(Empty, {});
            break;
          case 'string':
            el = /*#__PURE__*/_jsx(ImageLink, {
              imgSrc: item[imgKey],
              url: item[imgKey]
            });
            break;
          case 'object':
            if (item[imgKey]?.length === 0) return /*#__PURE__*/_jsx(Alert, {
              message: "Error",
              description: "Empty image list",
              type: "error",
              showIcon: true
            });
            el = /*#__PURE__*/_jsx(_Fragment, {
              children: item[imgKey].map(url => /*#__PURE__*/_jsx(ImageLink, {
                imgSrc: url,
                url: url
              }, url))
            });
            break;
          default:
            return /*#__PURE__*/_jsx(Alert, {
              message: "Error",
              description: `The value of ${imgKey} is not a string or an array, but a ${typeof item[imgKey]} type, cannot render image list!`,
              type: "error",
              showIcon: true
            });
        }
        return /*#__PURE__*/_jsxs(Card.Grid, {
          style: gridStyle,
          children: [el, /*#__PURE__*/_jsx(Link, {
            to: {
              pathname: `/${dbName}/${tableName}/update`,
              search: `?${primaryKey}=${item[primaryKey]}`
            },
            children: "Update"
          })]
        }, index);
      })
    }), /*#__PURE__*/_jsx(Pagination, {
      current: pagination.current,
      pageSize: pagination.pageSize,
      total: dataSource.length,
      pageSizeOptions: [4 * 3, 4 * 6, 4 * 10, 4 * 20],
      onChange: (current, pageSize) => {
        onChange({
          current,
          pageSize
        });
      }
    })]
  });
};
export default ImageCardTable;
//# sourceMappingURL=ImageCardTable.js.map