import React, { useState } from 'react';
import PropTypes from 'prop-types';
import { makeStyles } from '@material-ui/core';
import clsx from 'clsx';
import Pagination from '@material-ui/lab/Pagination';
import { CircularProgress } from '../../loading/CircularProgress';
import { PaginationPlacement } from './enum';
const useStyles = makeStyles(() => ({
    paginationWrapper: {
        display: 'flex'
    },
    centerPagination: {
        justifyContent: 'center'
    },
    rightPagination: {
        justifyContent: 'flex-end'
    }
}));
export const CardList = ({ itemComponent: ItemComponent, data = [], componentDataMap, pagination = false, itemsPerPage = 10, isServerSide = false, totalItems = 0, onPageChange = null, currentPage = 1, isLoading = false, paginationPlacement = PaginationPlacement.LEFT }) => {
    const [clientPage, setClientPage] = useState(1);
    const classes = useStyles();
    const page = isServerSide ? currentPage : clientPage;
    const safeData = Array.isArray(data) ? data : [];
    const paginatedData = pagination && !isServerSide
        ? safeData.slice((page - 1) * itemsPerPage, page * itemsPerPage)
        : safeData;
    const handlePageChange = (event, value) => {
        if (isServerSide) {
            onPageChange(value);
        }
        else {
            setClientPage(value);
        }
    };
    const mappedData = (item) => {
        const props = {};
        for (const [key, value] of Object.entries(componentDataMap)) {
            props[value] = item[key];
        }
        return props;
    };
    return (React.createElement("div", null, isLoading ? (React.createElement(CircularProgress, null)) : (React.createElement(React.Fragment, null, paginatedData.map((item, index) => (React.createElement(ItemComponent, Object.assign({ key: index }, mappedData(item))))), pagination && (React.createElement("div", { className: clsx(classes.paginationWrapper, {
            [classes.centerPagination]: paginationPlacement === PaginationPlacement.CENTER,
            [classes.rightPagination]: paginationPlacement === PaginationPlacement.RIGHT
        }) }, React.createElement(Pagination, { count: Math.ceil(isServerSide
            ? totalItems / itemsPerPage
            : safeData.length / itemsPerPage), page: page, onChange: handlePageChange, disabled: isLoading })))))));
};
CardList.propTypes = {
    itemComponent: PropTypes.elementType.isRequired,
    data: PropTypes.arrayOf(PropTypes.object),
    componentDataMap: PropTypes.objectOf(PropTypes.string).isRequired,
    pagination: PropTypes.bool,
    itemsPerPage: PropTypes.number,
    isServerSide: PropTypes.bool,
    totalItems: PropTypes.number,
    onPageChange: PropTypes.func,
    currentPage: PropTypes.number,
    isLoading: PropTypes.bool,
    paginationPlacement: PropTypes.string
};
CardList.defaultProps = {
    data: [],
    pagination: false,
    itemsPerPage: 10,
    isServerSide: false,
    totalItems: 0,
    onPageChange: null,
    currentPage: 1,
    isLoading: false,
    paginationPlacement: PaginationPlacement.LEFT
};
//# sourceMappingURL=CardList.js.map