import React, { useState } from 'react';
import { Button, Wrapper } from './style';
import { buildPagination, calNewPage, getButtonContent } from './math';
import { Left, Right, PageSizeOptions, Jumper } from './style';
import Input, { PositiveIntegerWithLimit } from '../input';
import { IPagination } from './types';

const Pagination = function(props: IPagination) {
    const { type, pageSize, total, page, pageSizeOptions, showPageSizeOptions, onChange, showJumper, ...rest } = props;
    const controlledPage = 'page' in props;
    const controlledPageSize = 'pageSize' in props;

    const [pageState, setPageState] = useState(1);
    const [pageSizeState, setPageSizeState] = useState(10);
    const pages = Math.ceil(total / pageSizeState);
    if (controlledPage && pageState !== page) {
        setPageState(page as number);
    }
    if (controlledPageSize && pageSizeState !== pageSize) {
        setPageSizeState(pageSize as number);
    }

    return (
        <Wrapper {...rest}>
            <Button
                type={type}
                key="first"
                appearance="stroke"
                disabled={pageState === 1}
                onClick={() => {
                    if (!controlledPage) {
                        setPageState((pageState as number) - 1);
                    }
                    onChange && onChange({ page: pageState - 1, pageSize: pageSizeState });
                }}
            >
                <Left />
            </Button>
            {buildPagination(pages, pageState as number).map((i, index) => (
                <Button
                    collapse={i === '<' || i === '>'}
                    key={index}
                    appearance={pageState === i ? 'solid' : i === '<' || i === '>' ? 'ghost' : 'stroke'}
                    type={type}
                    onClick={() => {
                        const newPage = calNewPage(pageState, i, pages);
                        if (!controlledPage) {
                            setPageState(newPage);
                        }
                        onChange && onChange({ page: newPage, pageSize: pageSizeState });
                    }}
                >
                    {getButtonContent(i)}
                </Button>
            ))}
            <Button
                type={type}
                key="last"
                appearance="stroke"
                disabled={pageState === pages}
                onClick={() => {
                    if (!controlledPage) {
                        setPageState(pageState + 1);
                    }
                    onChange && onChange({ page: pageState + 1, pageSize: pageSizeState });
                }}
            >
                <Right />
            </Button>
            {showPageSizeOptions && (
                <PageSizeOptions
                    type={type}
                    width={94}
                    options={pageSizeOptions.map(p => ({ label: `${p}条/页`, value: p }))}
                    value={pageSizeState}
                    onChange={(newPageSize: number) => {
                        const newPage = Math.ceil((pageState * pageSizeState) / newPageSize);
                        const max = Math.ceil(total / newPageSize);
                        const needChangePage = max < pageState;
                        if (!controlledPage && needChangePage) {
                            setPageState(newPage);
                        }
                        if (!controlledPageSize) {
                            setPageSizeState(newPageSize);
                        }
                        onChange && onChange({ page: needChangePage ? newPage : pageState, pageSize: newPageSize });
                    }}
                />
            )}
            {showJumper && (
                <Jumper type={type}>
                    <span>跳至</span>
                    <Input
                        width={56}
                        preValidator={PositiveIntegerWithLimit(pages, '')}
                        onEnter={(value: string) => {
                            setPageState(+value);
                            onChange && onChange({ page: +value, pageSize: pageSizeState });
                        }}
                    />
                    <span>页</span>
                </Jumper>
            )}
        </Wrapper>
    );
};
Pagination.defaultProps = {
    type: 'normal',
    pageSizeOptions: [10, 20, 50],
    showPageSizeOptions: true,
    showJumper: false,
};
export default Pagination;