import * as React from 'react';
import { st, classes } from './PaginationCore.st.css.js';
import { DataHooks } from './constants';
import { createResponsiveLayout, createResponsiveLayoutTemplate, createStaticLayout, } from './utils';
export class PageStrip extends React.Component {
    constructor() {
        super(...arguments);
        this.responsiveLayoutIsFresh = false;
        this.unmounted = false;
        this.state = { responsiveLayout: null };
    }
    componentDidMount() {
        if (this.props.updateResponsiveLayout) {
            // We can't do this in componentWillMount because the caller might need to access DOM here,
            // and SSR wouldn't work.
            this.props.updateResponsiveLayout(() => {
                this.responsiveLayoutIsFresh = false;
                // Even though we register a noop callback for `this.props.updateResponsiveLayout`
                // in `componentWillUnmount`, we cannot guarantee that the user will not hold onto
                // the old callback and invoke it after unmount, which is the reason for checking
                // `this.unmounted`.
                if (!this.unmounted) {
                    this.updateLayoutIfNeeded();
                }
            });
        }
        else {
            this.updateLayoutIfNeeded();
        }
    }
    UNSAFE_componentWillReceiveProps() {
        this.responsiveLayoutIsFresh = false;
    }
    componentDidUpdate() {
        if (!this.props.updateResponsiveLayout) {
            this.updateLayoutIfNeeded();
        }
        this.forceRepaintInMsEdge();
    }
    componentWillUnmount() {
        this.unmounted = true;
        if (this.props.updateResponsiveLayout) {
            this.props.updateResponsiveLayout(() => null);
        }
    }
    render() {
        return (React.createElement("div", { ref: el => {
                this.rootNode = el;
            }, "data-hook": DataHooks.pageStrip, id: this.props.id ? this.props.id + 'pageStrip' : undefined, className: st(classes.pageStrip, this.props.className), "data-aid": "qa-page-strip" },
            React.createElement("div", { className: classes.pageStripInner }, this.renderLayout(this.getLayout(), false)),
            this.isResponsive() && (React.createElement("div", { className: classes.pageStripInner + ' ' + classes.pageStripTemplate }, this.renderLayout(createResponsiveLayoutTemplate(this.props), true)))));
    }
    forceRepaintInMsEdge() {
        // MS Edge has a glitch that makes page numbers invisible when switching to the preview
        // mode in Santa editor. As a workaround we need to force text re-rendering.
        // Changing font-variant to small-caps should do the trick without actually affecting
        // the appearance of digits.
        if (!this.rootNode) {
            return;
        }
        const inlineStyle = this.rootNode.style;
        inlineStyle.fontVariant = inlineStyle.fontVariant ? '' : 'small-caps';
    }
    // We can't use page numbers as keys, because we might need to render the same page twice
    // for responsive layout. We also can't use index as a key, because React might reuse the
    // node for another page, and keep keyboard focus on it, which we don't want.
    renderLayout(layout, isDummy) {
        const { currentPage, pageUrl, disabled } = this.props;
        return layout.map((pageNumber, index) => {
            if (!pageNumber) {
                return (React.createElement("span", { key: index, className: classes.gap }, this.props.gapLabel));
            }
            if (pageNumber === currentPage) {
                return (React.createElement("span", { key: `${pageNumber}-${index}`, "data-hook": `${DataHooks.page}-${pageNumber} ${DataHooks.currentPage}`, "aria-label": `Page ${pageNumber}`, className: classes.currentPage }, pageNumber));
            }
            if (isDummy) {
                return (React.createElement("a", { key: `${pageNumber}-${index}`, className: st(classes.pageButton, { disabled }) }, pageNumber));
            }
            return (React.createElement("a", { key: `${pageNumber}-${index}`, "data-hook": `${DataHooks.page}-${pageNumber}`, "aria-label": `Page ${pageNumber}`, "aria-disabled": disabled, className: st(classes.pageButton, { disabled }), tabIndex: disabled || pageUrl ? undefined : 0, onClick: disabled ? undefined : e => this.props.onPageClick(e, pageNumber), onKeyDown: disabled ? undefined : e => this.props.onPageKeyDown(e, pageNumber), href: !disabled && pageUrl ? pageUrl(pageNumber) : undefined }, pageNumber));
        });
    }
    isResponsive() {
        return (this.props.responsive &&
            this.props.totalPages > 0 &&
            this.props.maxPagesToShow > 1);
    }
    getLayout() {
        if (!this.isResponsive()) {
            return createStaticLayout(this.props);
        }
        if (this.state.responsiveLayout) {
            return this.state.responsiveLayout;
        }
        return createStaticLayout({
            totalPages: this.props.totalPages,
            currentPage: this.props.currentPage,
            showFirstPage: this.props.showFirstPage,
            showLastPage: this.props.showLastPage,
            // This is pretty arbitrary. 5 is the minimum space required to show the first, current, and last page.
            maxPagesToShow: 5,
        });
    }
    updateLayoutIfNeeded() {
        if (!this.isResponsive() ||
            this.responsiveLayoutIsFresh ||
            !this.rootNode) {
            return;
        }
        this.responsiveLayoutIsFresh = true;
        this.setState({
            responsiveLayout: createResponsiveLayout({
                container: this.rootNode.children[1],
                totalPages: this.props.totalPages,
                currentPage: this.props.currentPage,
                maxPagesToShow: this.props.maxPagesToShow,
                showFirstPage: this.props.showFirstPage,
                showLastPage: this.props.showLastPage,
            }),
        });
    }
}
//# sourceMappingURL=PageStrip.js.map