import { X } from '@wix/wix-ui-icons-common';
import React from 'react';
import IconButton from '../IconButton';
import Text from '../Text';
import Tooltip from '../Tooltip';
import { arrowsDirection, dataHooks, modalPreviewIDs, skins, } from './constants';
import { classes, st } from './ModalPreviewLayout.st.css.js';
import NavigationButton from './NavigationButton/NavigationButton';
/** This is a fullscreen modal to present a document to the user overlaying the entire view port */
class ModalPreviewLayout extends React.PureComponent {
    constructor(props) {
        super(props);
        this._onRightNavigationClick = () => {
            const { childIndexDisplayed } = this.state;
            const { onClick } = this.props.nextButtonProps;
            const newChildIndexDisplayed = childIndexDisplayed + 1;
            this.setState({ childIndexDisplayed: newChildIndexDisplayed }, () => {
                onClick && onClick(newChildIndexDisplayed);
            });
        };
        this._onLeftNavigationClick = () => {
            const { childIndexDisplayed } = this.state;
            const { onClick } = this.props.prevButtonProps;
            const newChildIndexDisplayed = childIndexDisplayed - 1;
            this.setState({ childIndexDisplayed: newChildIndexDisplayed }, () => {
                onClick && onClick(newChildIndexDisplayed);
            });
        };
        this.state = {
            childIndexDisplayed: this.props.startDisplayingAtChildIndex,
        };
    }
    _shouldClose(id) {
        return (this.props.shouldCloseOnOverlayClick &&
            [modalPreviewIDs.overlay, modalPreviewIDs.innerOverlay].includes(id));
    }
    _onOverlayClick(onClose) {
        return ({ target: { id } }) => {
            if (this._shouldClose(id) && typeof onClose === 'function') {
                onClose();
            }
        };
    }
    _renderNavigationButtons(hasLeft, hasRight) {
        const { prevButtonProps, nextButtonProps } = this.props;
        return (React.createElement(React.Fragment, null,
            hasLeft && (React.createElement(NavigationButton, { tooltipText: prevButtonProps.tooltipText, direction: arrowsDirection.leftArrow, onClick: this._onLeftNavigationClick })),
            hasRight && (React.createElement(NavigationButton, { tooltipText: nextButtonProps.tooltipText, direction: arrowsDirection.rightArrow, onClick: this._onRightNavigationClick }))));
    }
    render() {
        const { dataHook, actions, title, children, onClose, closeButtonTooltipText, closeButtonAriaLabel, skin, } = this.props;
        const { childIndexDisplayed } = this.state;
        const childrenArr = React.Children.toArray(children);
        const hasLeft = childIndexDisplayed > 0;
        const hasRight = childIndexDisplayed < childrenArr.length - 1;
        return (React.createElement("div", { id: modalPreviewIDs.overlay, "data-hook": dataHook, className: classes.root, onClick: this._onOverlayClick(onClose), "data-skin": skin },
            React.createElement("div", { className: st(classes.header, { skin }) },
                React.createElement("div", { "data-hook": dataHooks.modalPreviewTitle, className: classes.title },
                    React.createElement(Text, { light: skin === skins.dark, ellipsis: true, tooltipProps: { placement: 'bottom' } }, title)),
                React.createElement("div", { className: classes.actions, "data-hook": dataHooks.modalPreviewActions }, actions),
                React.createElement("div", { className: classes.closeButton },
                    React.createElement(Tooltip, { disabled: !closeButtonTooltipText, className: classes.modalTooltip, dataHook: dataHooks.closeButtonTooltip, appendTo: "scrollParent", content: React.createElement(Text, null, closeButtonTooltipText), placement: "bottom" },
                        React.createElement(IconButton, { as: "button", onClick: onClose, priority: "secondary", ariaLabel: closeButtonAriaLabel, skin: skin === skins.dark ? 'transparent' : 'standard', dataHook: dataHooks.modalPreviewCloseButton },
                            React.createElement(X, null))))),
            React.createElement("div", { id: modalPreviewIDs.innerOverlay, "data-hook": dataHooks.innerOverlay, className: classes.innerOverlay },
                React.createElement("div", { "data-hook": dataHooks.modalPreviewContent, className: classes.content, "data-index": childIndexDisplayed }, childrenArr[childIndexDisplayed]),
                this._renderNavigationButtons(hasLeft, hasRight))));
    }
}
ModalPreviewLayout.displayName = 'ModalPreviewLayout';
ModalPreviewLayout.defaultProps = {
    shouldCloseOnOverlayClick: true,
    nextButtonProps: {},
    prevButtonProps: {},
    startDisplayingAtChildIndex: 0,
    skin: 'dark',
};
export default ModalPreviewLayout;
//# sourceMappingURL=ModalPreviewLayout.js.map