import * as tslib_1 from "tslib";
/**
 * @file @name Magnifier
 */
import React from 'react';
import { application } from '@skava/state';
import { observer } from 'xmobx/mobx-react';
import { ZoomCursorIcon } from '@skava/packages/ui';
import { toState } from './state';
import { MagnifierDom, ZoomingDom, ZoomImg, MagnifyingCursorWrapper, ZoomedImage } from './styled';
const desktopAttributes = Object.seal({
    onMouseMove: undefined,
    onMouseOut: undefined,
    onLoad: undefined,
    alt: '',
    src: '',
});
/**
 * minimum required @example
 *  const eh = <Magnifier src="" alt="" />
 */
let Magnifier = class Magnifier extends React.Component {
    /**
     * minimum required @example
     *  const eh = <Magnifier src="" alt="" />
     */
    constructor() {
        super(...arguments);
        this.observerState = toState();
        this.onMouseMove = (event) => {
            const { target, clientX, clientY } = event;
            this.handleMouseMove({ target, clientX, clientY });
        };
        this.onMouseOut = () => {
            this.enableAnimationRequestFrame({ showZoom: false });
        };
        this.onLoad = (event) => {
            const data = {
                absWidth: event.target.width,
                absHeight: event.target.height,
            };
            // @todo this is missing `enableZoom`, does that have any effect?
            this.enableAnimationRequestFrame(data);
        };
        this.renderZoomingDom = () => {
            return (React.createElement(ZoomingDom, { className: 'magnifying-glass', style: this.zoomDomStyle },
                React.createElement(ZoomedImage, Object.assign({ src: this.zoomImageAttributes.src }, this.zoomImageAttributes))));
        };
        this.renderMagnifyDom = () => {
            return (React.createElement(MagnifyingCursorWrapper, { style: this.cursorStyle },
                React.createElement(ZoomCursorIcon, null)));
        };
    }
    enableAnimationRequestFrame(data) {
        const setData = () => {
            this.observerState.setData(data);
        };
        window.requestAnimationFrame(setData);
    }
    handleMouseMove(event) {
        const { target, clientY, clientX } = event;
        const imgBounds = target.getBoundingClientRect();
        const { magnifierCursorWidth, magnifierCursorHeight } = this.props;
        let xPos = clientX - imgBounds.left;
        let yPos = clientY - imgBounds.top;
        xPos =
            xPos + magnifierCursorWidth / 2 > imgBounds.width
                ? imgBounds.width - magnifierCursorWidth / 2
                : xPos - magnifierCursorWidth / 2 < 0
                    ? 0
                    : xPos;
        yPos =
            yPos + magnifierCursorHeight / 2 > imgBounds.height
                ? imgBounds.height - magnifierCursorHeight / 2
                : yPos - magnifierCursorHeight / 2 < 0
                    ? 0
                    : yPos;
        const relX = xPos === 0 ? 0 : xPos - magnifierCursorWidth / 2;
        const relY = yPos === 0 ? 0 : yPos - magnifierCursorHeight / 2;
        const data = {
            showZoom: true,
            relX: relX / target.clientWidth,
            relY: relY / target.clientHeight,
            mgOffsetX: imgBounds.width,
            mgOffsetY: imgBounds.height,
            xPos,
            yPos,
        };
        this.enableAnimationRequestFrame(data);
    }
    get zoomImageAttributes() {
        const { imgWidth, imgHeight, magnifierCursorWidth, magnifierCursorHeight, src, zoomImgSrc, zoomFactor, } = this.props;
        const { states } = this.observerState;
        return {
            // dynamic touch zoom overlay
            // left: `calc(${states.relX * 100}% - ${imgWidth / 2}px + ${states.mgOffsetX}px)`,
            // top: `calc(${states.relY * 100}% - ${imgHeight / 2}px + ${states.mgOffsetY}px)`,
            src: `${zoomImgSrc || src}`,
            transform: `translate3d(-${states.relX * 100}%, -${states.relY * 100}%, 0)`,
            width: `${(states.mgOffsetX * imgWidth) / magnifierCursorWidth}px`,
            height: `${(states.mgOffsetY * imgHeight) / magnifierCursorHeight}px`,
        };
    }
    get imageAttributes() {
        // onTouchStart, onTouchMove, onTouchEnd,
        // @note - changing a single obj only
        if (!application.isDesktop) {
            desktopAttributes.onLoad = undefined;
            desktopAttributes.onMouseMove = undefined;
            desktopAttributes.onLoad = undefined;
        }
        else {
            desktopAttributes.onMouseMove = this.onMouseMove;
            desktopAttributes.onMouseOut = this.onMouseOut;
            desktopAttributes.onLoad = this.onLoad;
        }
        desktopAttributes.src = this.props.src;
        desktopAttributes.alt = this.props.alt;
        return desktopAttributes;
    }
    get cursorStyle() {
        const { magnifierCursorHeight, magnifierCursorWidth } = this.props;
        const { states } = this.observerState;
        if (states.yPos !== undefined && states.xPos !== undefined) {
            return {
                // @note removed states.yPos &&
                top: `${states.yPos - magnifierCursorHeight / 2}px`,
                left: `${states.xPos - magnifierCursorWidth / 2}px`,
                right: 'auto',
                bottom: 'auto',
            };
        }
    }
    get zoomDomStyle() {
        const { imgWidth, imgHeight } = this.props;
        const { states } = this.observerState;
        return {
            left: ` ${states.mgOffsetX}px`,
            width: imgWidth,
            height: imgHeight,
        };
    }
    render() {
        const zoomImgView = React.createElement(ZoomImg, Object.assign({}, this.imageAttributes));
        if (!application.isDesktop) {
            return zoomImgView;
        }
        return (React.createElement(MagnifierDom, { height: this.props.height, width: this.props.width },
            zoomImgView,
            this.observerState.states.showZoom && (React.createElement(React.Fragment, null,
                this.renderMagnifyDom(),
                this.renderZoomingDom()))));
    }
};
Magnifier.defaultProps = {
    // image
    width: '100%',
    height: 'auto',
    // zoom image
    zoomFactor: 1.5,
    // magnifying glass
    imgWidth: 350,
    imgHeight: 350,
    mgMouseOffsetX: 0,
    mgMouseOffsetY: 0,
    mgTouchOffsetX: -50,
    mgTouchOffsetY: -50,
    magnifierCursorWidth: 94,
    magnifierCursorHeight: 108,
};
Magnifier = tslib_1.__decorate([
    observer
], Magnifier);
export { Magnifier };
export default Magnifier;
//# sourceMappingURL=Magnifier.js.map