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

import {Pagination} from './Pagination';
import {StoreCounterText} from './StoreCounterText';

import {
    CommonListLayout,
    CommonListLayoutProps,
    CommonListLayoutDefaultProps
} from '../common/CommonListLayout';
import {Store} from '../../../data/Store';

import lang from '../../../../lang/common/index-en_US';

type ListLayoutProps = {
    store: Store<any>;
    paginationProps?: object; // FIXME to Pagination props
    paginationComponent?: React.Component;
} & CommonListLayoutProps &
    Partial<DefaultProps>;

type DefaultProps = {
    paginationProps: object;
    paginationComponent: React.Component;
} & CommonListLayoutDefaultProps;

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

    static defaultProps = {
        hasStoreCounterText: true,
        get storeCounterText() {
            return lang.TOTAL_AMOUNT;
        },
        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, store} = this.props;

        const PaginationComponent: any = paginationComponent;

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

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