import {Form, Row, Col} from "react-bootstrap";
import TablePagination from "./TablePagination";
import React from "react";

interface PaginationProps
{
    currentPage: number,
    totalRecords: number,
    recordLimit: number,
    sortOrder: string,
    sortColumn: number
}

interface FooterProps
{
    handleRecordsPerPage: (e: React.ChangeEvent<HTMLSelectElement>) => void,
    handlePageChange: (page: number) => void,
    download: {
        url: string;
    },
    pagination: PaginationProps
}

const Footer = ({handleRecordsPerPage, handlePageChange, download, pagination}: FooterProps) => {
    return (
        <div className="table-container_footer">
            <table className="tablesorter tablesorter-default">
                <tfoot>
                <tr key='download_spreadsheet'>
                    <td className="ops_datagrid_options">
                        <div className="ops_datagrid_export">
                            <div className="ops_datagrid_export_options export_options">
                                <a className="action small export_csv"
                                   href={download.url} target="_blank" rel="noopener noreferrer">Download all records
                                </a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr key='pagination'>
                    <td>
                        <Row className="">
                            <Col className="d-flex align-items-center justify-content-center justify-content-sm-start flex-wrap">
                                <label htmlFor="rows_per_page" className="me-1">Show rows per page:</label>
                                <Form.Select style={{width: '95px'}}
                                             size="sm"
                                             area-label="Number of records to display"
                                             onChange={(e) => handleRecordsPerPage(
                                                 e)}
                                             value={pagination?.recordLimit}
                                             id="rows_per_page"
                                >
                                    <option value="30">30</option>
                                    <option value="50">50</option>
                                    <option value="100">100</option>
                                    <option value="200">200</option>
                                </Form.Select>
                            </Col>
                            <Col>
                                <TablePagination handlePageChange={handlePageChange} {...pagination} />
                            </Col>
                        </Row>
                    </td>
                </tr>
                </tfoot>
            </table>
        </div>
    );
}

export default Footer;
