import { __assign, __extends } from "tslib";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Component } from 'react';
import cx from 'classnames';
import debounce from '../utils/debounce';
import { I18nReceiver as Receiver } from '../i18n';
import Portal from '../portal';
import Icon from '../icon';
var TRANSITION_DURATION = 500;
var Image = (function (_super) {
    __extends(Image, _super);
    function Image() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.state = {
            imageIndex: _this.props.index || 0,
            imageStyle: {},
            rotateIndex: 0,
            scaleTag: false,
        };
        _this.onMaskClick = function (e) {
            if (e.target === e.currentTarget) {
                _this.props.onClose();
            }
        };
        _this.onClose = function () {
            _this.props.onClose();
        };
        _this.handlePreviousAction = function () {
            var imagesNum = _this.props.images.length;
            var imageIndex = _this.state.imageIndex;
            imageIndex = (imageIndex - 1 + imagesNum) % imagesNum;
            _this.setState({
                imageIndex: imageIndex,
                imageStyle: {
                    transform: 'rotate(0deg)',
                },
                rotateIndex: 0,
                scaleTag: false,
            });
        };
        _this.handleNextAction = function () {
            var imagesNum = _this.props.images.length;
            var imageIndex = _this.state.imageIndex;
            imageIndex = (imageIndex + 1) % imagesNum;
            _this.setState({
                imageIndex: imageIndex,
                imageStyle: {
                    transform: 'rotate(0deg)',
                },
                rotateIndex: 0,
                scaleTag: false,
            });
        };
        _this.handleRotate = function () {
            var scaleTag = _this.state.scaleTag;
            var scaleRatio = _this.props.scaleRatio;
            if (scaleRatio < 1) {
                throw new Error("Invalid prop `scaleRatio` in previewImage, it should be greater than 1.");
            }
            var rotateIndex = _this.state.rotateIndex;
            var deg = 90 + rotateIndex * 90;
            rotateIndex++;
            var transformStyle = scaleTag
                ? "rotate(" + deg + "deg) scale(" + scaleRatio + ")"
                : "rotate(" + deg + "deg) scale(1)";
            _this.setState({
                imageStyle: {
                    transform: transformStyle,
                    transitionDuration: TRANSITION_DURATION + "ms",
                },
                rotateIndex: rotateIndex,
            });
        };
        _this.handleScale = function () {
            var _a = _this.state, rotateIndex = _a.rotateIndex, scaleTag = _a.scaleTag;
            var scaleRatio = _this.props.scaleRatio;
            if (scaleRatio < 1) {
                throw new Error("Invalid prop `scaleRatio` in previewImage, it should be greater than 1.");
            }
            var deg = rotateIndex * 90;
            var transformStyle = scaleTag
                ? "rotate(" + deg + "deg) scale(1)"
                : "rotate(" + deg + "deg) scale(" + scaleRatio + ")";
            _this.setState({
                imageStyle: {
                    transform: transformStyle,
                    transitionDuration: TRANSITION_DURATION + "ms",
                },
                scaleTag: !scaleTag,
            });
        };
        return _this;
    }
    Image.prototype.render = function () {
        var _this = this;
        var _a = this.props, images = _a.images, showRotateBtn = _a.showRotateBtn, className = _a.className;
        var _b = this.state, scaleTag = _b.scaleTag, imageIndex = _b.imageIndex, imageStyle = _b.imageStyle;
        var imageClassName = cx('zent-image-p-show-image', {
            'zent-image-p-is-zooming': scaleTag,
        });
        return (_jsx(Portal, __assign({ visible: true, onClose: this.onClose, className: cx('zent-image-p-anchor', className), closeOnESC: true, blockPageScroll: true }, { children: _jsx("div", __assign({ className: "zent-image-p-backdrop", "data-zv": 'v10.0.12' }, { children: _jsxs("div", __assign({ className: "zent-image-p-wrap", "data-zv": 'v10.0.12' }, { children: [_jsx("div", __assign({ className: "zent-image-p-close", onClick: this.onClose, "data-zv": 'v10.0.12' }, { children: _jsx(Icon, { type: "close" }, void 0) }), void 0), _jsx(Receiver, __assign({ componentName: "PreviewImage" }, { children: function (i18n) { return (_jsx("div", __assign({ className: "zent-image-p-body", onClick: _this.onMaskClick, "data-zv": 'v10.0.12' }, { children: images.map(function (image, index) {
                                    if (index === imageIndex) {
                                        return (_jsx("img", { className: imageClassName, onClick: _this.handleScale, style: imageStyle, src: image, alt: i18n.alt, "data-zv": 'v10.0.12' }, index));
                                    }
                                    return null;
                                }) }), void 0)); } }), void 0), _jsx(Receiver, __assign({ componentName: "PreviewImage" }, { children: function (i18n) {
                                var needPager = images.length > 1;
                                var footerCxs = cx('zent-image-p-footer', {
                                    'zent-image-p-show-rotate-btn': showRotateBtn,
                                    'zent-image-p-footer-paging': needPager,
                                });
                                var rotateCxs = cx('zent-image-p-action', {
                                    'zent-image-p-rotate-action': !needPager,
                                });
                                return (_jsxs("div", __assign({ className: footerCxs, "data-zv": 'v10.0.12' }, { children: [needPager && (_jsx("span", __assign({ className: "zent-image-p-action", onClick: _this.handlePreviousAction, "data-zv": 'v10.0.12' }, { children: i18n.prev }), void 0)), showRotateBtn && (_jsx("span", __assign({ className: rotateCxs, onClick: debounce(_this.handleRotate, TRANSITION_DURATION, { immediate: true }), "data-zv": 'v10.0.12' }, { children: i18n.rotate }), void 0)), needPager && (_jsx("span", __assign({ className: "zent-image-p-action", onClick: _this.handleNextAction, "data-zv": 'v10.0.12' }, { children: i18n.next }), void 0))] }), void 0));
                            } }), void 0)] }), void 0) }), void 0) }), void 0));
    };
    Image.defaultProps = {
        className: '',
        showRotateBtn: true,
        images: [],
        index: 0,
        scaleRatio: 1.5,
    };
    return Image;
}(Component));
export default Image;
