import template from "./Pagination.html";
import style from "antd/lib/pagination/style/index.css";

class Pagination {
    useModules = ["esNgAntd"];

    template = template;

    props = {
        defaultCurrent: Number,
        current: Number,
        total: Number,
        defaultPageSize: Number,
        pageSize: Number,
        onChange: Function,
        onShowSizeChange: Function,
        showQuickJumper: Boolean,
        showSizeChanger: Boolean,
        size: String,
        showTotal: Function,
    };

    state = {
        total: null,
        current: null,
        pageSize: null,
        pageNum: null,
        pageNumList: null,
        defaultPageSize: this.props.defaultPageSize || 10
    };

    watch = {
        total: function (newVal) {
            if (newVal) {
                this.state.total = Number(newVal);
                this.reset();
                this.state.pageNum = this.getPageNum();
                this.state.pageNumList = this.getPageNumList();
            }
        }
    }

    constructor() {
        esNgAntd.createStyle("ant-pagination", style);
        this.state.total = Number(this.props.total || 0);
        this.state.current = Number(
            this.props.current || this.props.defaultCurrent || 1
        );
        this.state.pageSize =
            this.props.pageSize || this.props.defaultPageSize || 10;
        this.state.pageNum = this.getPageNum();
        this.state.pageNumList = this.getPageNumList();
    }

    handleShowTotal() {
        return this.props.showTotal({
            total: this.state.total
        })
    }

    getItemLinkClassName(value) {
        if (typeof value === "number") {
            return (
                "ant-pagination-item" +
                (this.state.current === value
                    ? " ant-pagination-item-active"
                    : "")
            );
        } else {
            return "ant-pagination-jump-next ant-pagination-jump-next-custom-icon";
        }
    }

    reset() {
        this.state.current = 1;
    }

    getPageNumList() {
        let pageNumList = [this.state.current];
        let pageNum = this.getPageNum();
        if (pageNum <= 7 || this.state.current - 1 < 4) {
            for (let i = this.state.current - 1; i > 0; i--) {
                pageNumList.unshift(i);
            }
        } else {
            let len = this.state.current - 1 > 2 ? 2 : this.state.current - 1;
            for (let i = 1; i <= len; i++) {
                pageNumList.unshift(this.state.current - i);
            }
            if (this.state.current - 2 > 2) {
                pageNumList.unshift("prev");
                pageNumList.unshift(1);
            }
        }

        if (pageNum <= 7 || pageNum - this.state.current < 4) {
            for (let i = this.state.current + 1; i <= pageNum; i++) {
                pageNumList.push(i);
            }
        } else {
            let limit =
                3 - this.state.current > 0 ? 2 + (3 - this.state.current) : 2;
            let len =
                pageNum - this.state.current > limit
                    ? limit
                    : pageNum - this.state.current;
            for (let i = 1; i <= len; i++) {
                pageNumList.push(this.state.current + i);
            }
            if (pageNum - this.state.current > 2) {
                pageNumList.push("next");
                pageNumList.push(pageNum);
            }
        }
        return pageNumList;
    }

    getPageNum() {
        return (
            Math.ceil(
                this.state.total /
                    (this.state.pageSize || this.props.defaultPageSize || 10)
            ) || 1
        );
    }

    getPopupContainer() {
        return $element[0].querySelector(".ant-pagination-options");
    }

    handleNext() {
        if (this.state.current === this.state.pageNum) {
            return false;
        }
        this.handleClick(this.state.current+1);
    }

    handlePrev() {
        if (this.state.current === 1) {
            return false;
        }
        this.handleClick(this.state.current-1);
    }

    handleClick(value) {
        if (value === this.state.current) {
            return;
        }
        if (value === "next") {
            value = this.state.current + 5;
        }
        if (value === "prev") {
            value = this.state.current - 5;
        }
        this.setCurrent(this.getCurrent(value));
    }

    handleChange() {
        let current = this.state.current;
        this.state.pageNum = this.getPageNum();
        this.state.pageNumList = this.getPageNumList();
        if (this.state.current > this.state.pageNum) {
            current = this.state.pageNum;
        } else if (this.state.current < 1) {
            current = 1;
        }
        this.props.onChange({
            page: current,
            pageSize: parseInt(this.state.pageSize),
        });
    }

    handleSelectChange(value) {
        this.state.current = 1;
        this.state.pageSize = parseInt(value);
        this.handleChange();
    }

    getCurrent(number) {
        if (number > this.state.pageNum) {
            return this.state.pageNum;
        }
        if (number < 1) {
            return 1;
        }
        return parseInt(number);
    }

    setCurrent(value) {
        if (!value) {
            return;
        }
        this.state.current = this.getCurrent(value);
        this.state.pageNumList = this.getPageNumList();
        this.handleChange();
    }

    handleBlur(event) {
        this.setCurrent(event.target.value);
        event.target.value = null;
    }

    onKeyPress(event) {
        if (event.keyCode === 13 || event.keyCode === 32) {
            this.setCurrent(event.target.value);
            event.target.value = null;
        }
    }
}