import React from 'react';
import { SvgIcon, Typography } from '@mui/material';
import { IconColor } from '../types/style.types';
import { TableContext } from '../types/table.type';
import { DOTS, usePagination } from './paginator.hook';
import { PaginatorButton, PaginatorContainer, PaginatorItem } from './style';

export interface DataTablePaginatorProps {
    context: TableContext,
    virtualized: boolean,
    siblingCount: number,
    onPageChange: (page: number, last: number) => void,
}

export const DataTablePaginator: React.FC<DataTablePaginatorProps> = ({ context, virtualized, siblingCount, onPageChange }) => {
    const [forceUpdate, setForceUpdate] = React.useState(false);

    context.forceUpdatePaginator = () => {
        setForceUpdate(!forceUpdate);
    }
    const totalCount = context.data && context.data.rows
        ? context.data.rows.length
        : 0;
    const pageSize = virtualized
        ? 1000
        : context.paginator.pageSize;
    const currentPage = context.paginator.currentPage;

    const paginationRange = usePagination({
        totalCount,
        pageSize,
        currentPage,
        siblingCount,
    });

    if (context.paginator.currentPage === 0 || totalCount === 0) {
        return null;
    }

    const lastPage = paginationRange && paginationRange[paginationRange.length - 1];
    const hasNext = context && context.data && !!context.data.next;

    const onNext = () => {
        onPageChange(currentPage + 1, Number(lastPage));
    };
    const onPrevious = () => {
        onPageChange(currentPage - 1, Number(lastPage));
    };


    return (
        <>
            {
                pageSize && currentPage &&
                <PaginatorContainer>
                    <PaginatorItem>
                        <PaginatorButton disabled={currentPage === 1 || (!!context.modifications && Object.keys(context.modifications).length > 0)} onClick={onPrevious}>
                            <LeftArrowIcon color={currentPage === 1 || (!!context.modifications && Object.keys(context.modifications).length > 0) ? 'disabled' : 'primary'} />
                        </PaginatorButton>
                    </PaginatorItem>
                    {
                        paginationRange && paginationRange.map((pageNumber, key) => (
                            pageNumber === DOTS
                                ? (
                                    <PaginatorItem key={pageNumber + key}>&#8230;</PaginatorItem>
                                )
                                : (
                                    <PaginatorItem key={pageNumber}>
                                        <PaginatorButton disabled={currentPage === pageNumber || (!!context.modifications && Object.keys(context.modifications).length > 0)} onClick={() => onPageChange(Number(pageNumber), Number(lastPage))}>
                                            <Typography color={(!!context.modifications && Object.keys(context.modifications).length > 0) ? 'disabled' : currentPage === pageNumber ? 'primary' : 'textPrimary'}>
                                                {pageNumber}
                                            </Typography>
                                        </PaginatorButton>
                                    </PaginatorItem>
                                )
                        ))
                    }
                    <PaginatorItem>
                        <PaginatorButton disabled={currentPage === lastPage && !hasNext || (!!context.modifications && Object.keys(context.modifications).length > 0)} onClick={onNext}>
                            <RightArrowIcon color={currentPage === lastPage && !hasNext || (!!context.modifications && Object.keys(context.modifications).length > 0) ? 'disabled' : 'primary'} />
                        </PaginatorButton>
                    </PaginatorItem>
                </PaginatorContainer>
            }
        </>
    )
}

const LeftArrowIcon = ({ color }: { color: IconColor }) => (
    <SvgIcon color={color} fontSize="small" width="24" height="24" overflow="hidden" viewBox="0 0 24 24">
        <g>
            <path d="M17.77 3.77 16 2 6 12l10 10 1.77-1.77L9.54 12z" />
        </g>
    </SvgIcon>
)
const RightArrowIcon = ({ color }: { color: IconColor }) => (
    <SvgIcon color={color} fontSize="small" width="24" height="24" overflow="hidden" viewBox="0 0 24 24">
        <g>
            <path d="M6.23 20.23 8 22l10-10L8 2 6.23 3.77 14.46 12z" />
        </g>
    </SvgIcon>
)