import React, { PureComponent } from 'react';
import Photoswipe from 'photoswipe';
import PhotoswipeUIDefault from 'photoswipe/dist/photoswipe-ui-default';
import 'photoswipe/dist/photoswipe.css';
import 'photoswipe/dist/default-skin/default-skin.css';
import { Modal } from '../Modal';
import { get } from 'lodash-es';
import FSI18n, { translationKeys } from '@brandingbrand/fsi18n';
const componentTranslationKeys = translationKeys.flagship.zoomCarousel;
const events = [
    'beforeChange',
    'afterChange',
    'imageLoadComplete',
    'resize',
    'gettingData',
    'mouseUsed',
    'initialZoomIn',
    'initialZoomInEnd',
    'initialZoomOut',
    'initialZoomOutEnd',
    'parseVerticalMargin',
    'close',
    'unbindEvents',
    'destroy',
    'updateScrollOffset',
    'preventDragEvent',
    'shareLinkClick'
];
export class PhotoSwipe extends PureComponent {
    constructor() {
        super(...arguments);
        this.openPhotoSwipe = (props) => {
            const { items, options } = props;
            this.photoSwipe = new Photoswipe(this.pswpElement, PhotoswipeUIDefault, items, options);
            events.forEach((event) => {
                const callback = get(props, event);
                if (callback || event === 'destroy') {
                    const self = this;
                    this.photoSwipe.listen(event, function (...args) {
                        if (callback) {
                            args.unshift(this);
                            callback(...args);
                        }
                        if (event === 'destroy') {
                            self.handleClose();
                        }
                    });
                }
            });
            this.photoSwipe.init();
        };
        this.closePhotoSwipe = () => {
            if (!this.photoSwipe) {
                return;
            }
            this.photoSwipe.close();
        };
        this.handleClose = () => {
            if (this.props.onClose) {
                this.props.onClose();
            }
        };
    }
    componentDidMount() {
        if (this.props.isOpen) {
            this.openPhotoSwipe(this.props);
        }
    }
    componentDidUpdate(prevProps) {
        if (prevProps.isOpen && !this.props.isOpen) {
            this.closePhotoSwipe();
        }
        else if (!prevProps.isOpen && this.props.isOpen) {
            requestAnimationFrame(() => {
                this.openPhotoSwipe(this.props);
            });
        }
    }
    componentWillUnmount() {
        this.closePhotoSwipe();
    }
    render() {
        return (<Modal visible={this.props.isOpen} transparent={true}>
        <div className={`pswp`} tabIndex={-1} role='dialog' aria-hidden='true' ref={node => {
            this.pswpElement = node;
        }}>
          <div className='pswp__bg'/>
          <div className='pswp__scroll-wrap'>
            <div className='pswp__container'>
              <div className='pswp__item'/>
              <div className='pswp__item'/>
              <div className='pswp__item'/>
            </div>
            <div className='pswp__ui pswp__ui--hidden'>
              <div className='pswp__top-bar'>
                <div className='pswp__counter'/>
                <button className='pswp__button pswp__button--close' title={FSI18n.string(componentTranslationKeys.actions.close.actionBtn)}/>
                <button className='pswp__button pswp__button--share' title={FSI18n.string(componentTranslationKeys.actions.share.actionBtn)}/>
                <button className='pswp__button pswp__button--fs' title={FSI18n.string(componentTranslationKeys.actions.fullscreen.actionBtn)}/>
                <button className='pswp__button pswp__button--zoom' title={FSI18n.string(componentTranslationKeys.actions.zoom.actionBtn)}/>
                <div className='pswp__preloader'>
                  <div className='pswp__preloader__icn'>
                    <div className='pswp__preloader__cut'>
                      <div className='pswp__preloader__donut'/>
                    </div>
                  </div>
                </div>
              </div>
              <div className='pswp__share-modal pswp__share-modal--hidden pswp__single-tap'>
                <div className='pswp__share-tooltip'/>
              </div>
              <button className='pswp__button pswp__button--arrow--left' title={FSI18n.string(componentTranslationKeys.actions.prev.actionBtn)}/>
              <button className='pswp__button pswp__button--arrow--right' title={FSI18n.string(componentTranslationKeys.actions.next.actionBtn)}/>
              <div className='pswp__caption'>
                <div className='pswp__caption__center'/>
              </div>
            </div>
          </div>
        </div>
      </Modal>);
    }
}
//# sourceMappingURL=PhotoSwipe.web.js.map