import * as React from 'react';
import { debounce } from 'lodash';
import {MmuiPaginationInputComponent} from "../mmui-react-component";

const PAGE = {
    FIRST: 'FIRST',
    PREVIOUS: 'PREVIOUS',
    NEXT: 'NEXT',
    LAST: 'LAST',
};

export class MmuiBlueInputPaginationComponent extends MmuiPaginationInputComponent {

    render() {
        return (
            <nav aria-label="Pagination">
                <div className="pagination--control">
                    <form
                        className="d-flex align-items-center mx-auto form-inline"
                        aria-live="polite"
                    >
                        <div
                            style={{
                            visibility:
                                +this.props.pageNumber > 1
                                    ? 'visible'
                                    : 'hidden',
                            }}
                        >
                            <button
                                className="btn btn-link"
                                type="submit"
                                aria-label="First Page"
                                onClick={(e) =>
                                    this.onCurrentPageUpdate(e, PAGE.FIRST)
                                }
                            >
                                <span className="icon-arrow-spin-left"></span>
                                <span className="sr-only">First Page</span>
                            </button>
                            <button
                                className="btn btn-link ml-0"
                                type="submit"
                                aria-label="Previous"
                                onClick={(e) =>
                                    this.onCurrentPageUpdate(e, PAGE.PREVIOUS)
                                }
                            >
                                <span className="prev"></span>
                                <span className="sr-only">Previous Page</span>
                            </button>
                        </div>

                        <span className="form-text">Page</span>
                        {!(this.props.totalPages == 1) ? (
                            <input
                                className="form-control"
                                aria-placeholder="Page Input"
                                type="number"
                                min={1}
                                max={this.props.totalPages}
                                size={2}
                                aria-label={this.props.pageNumber}
                                onKeyDown={this.handleKeyDown}
                                onKeyUp={this.handleKeyUp}
                                onPaste={(e) => e.preventDefault()}
                                onBlur={this.handleBlur}
                                ref={(input) => {
                                    this.pageNumberInput = input;
                                }}
                                defaultValue={this.props.pageNumber}
                                key={this.props.pageNumber}
                                inputMode="numeric"
                                pattern="[0-9]*"
                            />
                        ) : (
                            <span>&nbsp;1&nbsp;</span>
                        )}
                        <span className="form-text">of {this.props.totalPages}</span>

                        <div
                            style={{
                                visibility:
                                    +this.props.pageNumber != this.props.totalPages
                                        ? 'visible'
                                        : 'hidden',
                            }}
                        >
                            <button
                                className="btn btn-link"
                                type="submit"
                                aria-label="Next"
                                onClick={(e) =>
                                    this.onCurrentPageUpdate(e, PAGE.NEXT)
                                }
                            >
                                <span className="next"></span>
                                <span className="sr-only">Next Page</span>
                            </button>
                            <button
                                className="btn btn-link ml-0"
                                type="submit"
                                aria-label="Last Page"
                                onClick={(e) =>
                                    this.onCurrentPageUpdate(e, PAGE.LAST)
                                }
                            >
                                <span className="icon-arrow"></span>
                                <span className="sr-only">Last Page</span>
                            </button>
                        </div>
                    </form>
                </div>
            </nav>
        );
    }
}