import * as React from 'react';

import {Button} from '../../../index';
import {Pagination} from '../pagination/Pagination';
import {PageSize} from '../page_size/PageSize';
import {PaginationContainer} from '../pagination/PaginationContainer';

type FooterPanelProps = {
    currentPage: number;
    pageSize: number;
    totalPages: number;
    totalRecords: number;
    reload: () => void;
    setPage: (page: number) => void;
    setPageSize: (pageSize: number) => void;
    isDisabled?: boolean;
    refreshText: string;
    pageText: string;
    displayRecordsText: string;
    ofText: string;
}

export class FooterPanel extends React.Component<FooterPanelProps> {
    override render () {
        const {
            currentPage,
            pageSize,
            totalPages,
            totalRecords,
            reload,
            setPage,
            setPageSize,
            isDisabled,
            refreshText,
            pageText,
            displayRecordsText,
            ofText
        } = this.props;

        const start = (currentPage - 1) * pageSize + 1;
        const end = (currentPage === totalPages) ? totalRecords : start + pageSize - 1;

        return (
            <PaginationContainer>
                <div style={{marginLeft: '5px'}}>
                    <Button
                        onClick={reload}
                        leftIcon={'reload'}
                        isGhost={true}
                        data-qaid='refreshButton'
                    >
                        {refreshText}
                    </Button>
                </div>
                <Pagination
                    page={currentPage}
                    pages={totalPages}
                    onPageChange={setPage}
                    isDisabled={isDisabled}
                    ofText={ofText}
                />
                <div style={{marginRight: '10px'}}>
                    &nbsp;
                    {displayRecordsText}:
                    &nbsp;
                    <PageSize
                        value={`${start} - ${end}`}
                        onChangePageSize={setPageSize}
                        pageSizeOptions={[20, 50, 100]}
                        rowsText={pageText}
                        isDisabled={isDisabled}
                    />
                </div>
            </PaginationContainer>
        );
    }
}