Liferay.Loader.define("commerce-frontend-js@4.0.75/components/gallery/Gallery",["module","exports","require","liferay!frontend-js-react-web$prop-types","liferay!frontend-js-react-web$react","../../utilities/eventsDefinitions","./MainImage","./Overlay","./Thumbnails","./util/index"],(function(e,t,s){window;{Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;_interopRequireDefault(s("liferay!frontend-js-react-web$prop-types"));var a=_interopRequireDefault(s("liferay!frontend-js-react-web$react")),i=s("../../utilities/eventsDefinitions"),n=_interopRequireDefault(s("./MainImage")),l=_interopRequireDefault(s("./Overlay")),o=_interopRequireDefault(s("./Thumbnails")),r=s("./util/index");function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}class Gallery extends a.default.Component{constructor(e){super(e),this.state={fullscreen:!1,images:this.props.images,loaded:new Set,loading:!1,selected:0},this.fullscreenClose=this.fullscreenClose.bind(this),this.fullscreenOpen=this.fullscreenOpen.bind(this),this.goTo=this.goTo.bind(this),this.goToNext=this.goToNext.bind(this),this.goToPrev=this.goToPrev.bind(this),this.imageLoad=this.imageLoad.bind(this),this.imageSelect=this.imageSelect.bind(this),this._handleImagesUpdate=this._handleImagesUpdate.bind(this)}componentDidMount(){Liferay.on("".concat(this.props.namespace).concat(i.CP_INSTANCE_CHANGED),this._handleImagesUpdate,this)}componentWillUnmount(){Liferay.detach("".concat(this.props.namespace).concat(i.CP_INSTANCE_CHANGED),this._handleImagesUpdate,this)}_handleImagesUpdate({formFields:e}){const{namespace:t,viewCPAttachmentURL:s}=this.props;(0,r.updateGallery)(e,t,s).then((e=>{const t=this.state.images.length>1?this.state.images.findIndex((({URL:t})=>t===e[0].url)):0,s=t>=0?t:0;this.setState({selected:s})}))}fullscreenOpen(){this.state.loading||this.imageLoad(this.state.images[this.state.selected].URL).then((()=>{this.setState({fullscreen:!0})}))}fullscreenClose(){this.setState({fullscreen:!1})}goTo(e){this.imageSelect((this.state.images.length+e)%this.state.images.length)}goToPrev(e){e.stopPropagation(),this.goTo(this.state.selected-1)}goToNext(e){e.stopPropagation(),this.goTo(this.state.selected+1)}imageLoad(e){return new Promise((t=>{this.state.loaded.has(e)?t(e):(this.setState({loading:!0}),(0,r.fetchImage)(e).then((()=>{this.setState({loaded:new Set(this.state.loaded).add(e),loading:!1},(()=>{t(e)}))})))}))}imageSelect(e){e===this.state.selected||this.state.loading||this.imageLoad(this.state.images[e].URL).then((()=>{this.setState({selected:e})}))}render(){const{background:e}=this.props,{fullscreen:t,images:s,loading:i,selected:r}=this.state;return a.default.createElement("div",{className:"product-gallery"},s&&!!s.length&&a.default.createElement(n.default,{adaptiveMediaImageHTMLTag:s[r].adaptiveMediaImageHTMLTag,background:e,loading:i,onNext:s.length>1?this.goToNext:null,onPrev:s.length>1?this.goToPrev:null,onZoom:this.fullscreenOpen,src:s[r].URL,title:s[r].title}),s.length>1?a.default.createElement(o.default,{background:e,images:s,onChange:this.imageSelect,selected:r}):null,t?a.default.createElement(l.default,{adaptiveMediaImageHTMLTag:s[r].adaptiveMediaImageHTMLTag,background:e,onClose:this.fullscreenClose,onNext:s.length>1?this.goToNext:null,onPrev:s.length>1?this.goToPrev:null,src:s[r].URL,title:s[r].title}):null)}}t.default=Gallery}}));
//# sourceMappingURL=Gallery.js.map