Liferay.Loader.define("commerce-frontend-js@4.0.52/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;h(s("liferay!frontend-js-react-web$prop-types"));var a=h(s("liferay!frontend-js-react-web$react")),i=s("../../utilities/eventsDefinitions"),n=h(s("./MainImage")),l=h(s("./Overlay")),o=h(s("./Thumbnails")),d=s("./util/index");function h(e){return e&&e.__esModule?e:{default:e}}class e 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,d.updateGallery)(e,t,s).then((e=>{const t=this.state.images>1?this.state.images.findIndex((({downloadUrl:t})=>t===e[0].URL)):0;this.setState({selected:t})}))}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,d.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:d}=this.state;return a.default.createElement("div",{className:"product-gallery"},s&&s.length>0&&a.default.createElement(n.default,{adaptiveMediaImageHTMLTag:s[d].adaptiveMediaImageHTMLTag,background:e,loading:i,onNext:s.length>1?this.goToNext:null,onPrev:s.length>1?this.goToPrev:null,onZoom:this.fullscreenOpen,src:s[d].URL,title:s[d].title}),s.length>1?a.default.createElement(o.default,{background:e,images:s,onChange:this.imageSelect,selected:d}):null,t?a.default.createElement(l.default,{adaptiveMediaImageHTMLTag:s[d].adaptiveMediaImageHTMLTag,background:e,onClose:this.fullscreenClose,onNext:s.length>1?this.goToNext:null,onPrev:s.length>1?this.goToPrev:null,src:s[d].URL,title:s[d].title}):null)}}t.default=e}}));
//# sourceMappingURL=Gallery.js.map