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

import {PurePagination} from './PurePagination';
import {CounterText} from './CounterText';

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

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

type PureListLayoutProps = {
    paginationProps?: object; // FIXME to Pagination props
    paginationComponent?: React.Component;
    counter?: number;
} & CommonListLayoutProps &
    Partial<CommonListLayoutDefaultProps>;

type CommonListLayoutDefaultProps = {
    paginationProps: object; // FIXME to Pagination props
    paginationComponent: React.Component;
    counter: number;
};

// CommonListLayout
export class PureListLayout extends React.Component<PureListLayoutProps> {
    static propTypes = {
        hasStoreCounterText: PropTypes.bool,
        storeCounterText: PropTypes.string,
        paginationProps: PropTypes.shape(PurePagination['propTypes']),
        paginationComponent: PropTypes.func,
        counter: PropTypes.number
    };

    static defaultProps = {
        hasStoreCounterText: true,
        get storeCounterText() {
            return lang.TOTAL_AMOUNT;
        },
        paginationProps: PurePagination.defaultProps,
        paginationComponent: PurePagination,
        counter: 0
    };

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

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

        if (!hasStoreCounterText) {
            return null;
        }

        return <CounterText counter={counter as any} template={storeCounterText} />;
    };

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

        const PaginationComponent: any = paginationComponent;

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

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