import React from 'react';
import PropTypes from 'prop-types';

import {CommonListLayout} from '../common/CommonListLayout';
import {Pagination} from './Pagination';
import {StoreCounterText} from './StoreCounterText';
import {CounterText} from '../CounterText';

export class ListLayout extends React.Component {
    static propTypes = {
        store: PropTypes.object.isRequired,
        hasStoreCounterText: PropTypes.bool,
        storeCounterText: PropTypes.string,
        paginationProps: PropTypes.shape(Pagination.propTypes),
        paginationComponent: PropTypes.func
    };

    static defaultProps = {
        hasStoreCounterText: true,
        storeCounterText: CounterText.defaultProps.template,
        paginationProps: Pagination.defaultProps,
        paginationComponent: Pagination
    };

    static VIEW_MODE_DETAILS = CommonListLayout.VIEW_MODE_DETAILS;
    static VIEW_MODE_FULL = CommonListLayout.VIEW_MODE_FULL;

    renderCounterText = () => {
        const {hasStoreCounterText, store, storeCounterText} = this.props;

        if (!hasStoreCounterText) {
            return null;
        }

        return <StoreCounterText store={store} template={storeCounterText} />;
    };

    renderPagination = (showPageSizeSelector = true) => {
        const {paginationProps, paginationComponent: PaginationComponent, store} = this.props;

        return (
            <PaginationComponent
                store={store}
                showPageSizeSelector={showPageSizeSelector}
                {...paginationProps}
            />
        );
    };

    render() {
        return (
            <CommonListLayout
                {...this.props}
                renderCounterText={this.renderCounterText}
                renderPagination={this.renderPagination}
            />
        );
    }
}
