import { withStyles } from '@material-ui/core/styles'
import debounce from 'lodash/debounce'

const styles = theme => ({
  image: {
    position: 'relative',
    left: '50%',
    transform: 'translateX(-50%)',
  },
})

const ceiling = (num, ceiling) => (num > ceiling) ? ceiling : num

const byRatio = (initial, ratio) => Math.round(initial * ratio)

const maxWidth = () => global.innerWidth

const maxHeight = topOffset => global.innerHeight - topOffset

class FullScreenPhoto extends React.Component {
  constructor(props) {
    super(props)
    this.image = React.createRef()
    this.state = {
      isClient: false,
      imageLoaded: false,
    }
  }

  componentDidMount() {
    window.addEventListener('resize', this.handleResize, false)
    this.setState({ ...this.state, isClient: true })

    const element = this.image.current
     if (element && element.complete) {
      this.setState({ isClient: true, imageLoaded: true })
     }
  }

  componentDidUpdate({ photo }) {
    if (this.props.photo !== photo) {
      this.setState({ ...this.state, imageLoaded: false })
    }
  }

  componentWillUnmount() {
    window.removeEventListener('resize', this.handleResize, false)
  }

  handleResize = debounce(() => this.forceUpdate(), 20, false)

  handleImageLoad = _event => {
    this.setState({ ...this.state, imageLoaded: true })
  }

  calculateImageDimensions(photo, topOffset) {
    if (!this.state.isClient) {
      return { display: 'none', }
    }
    const { width, height } = photo.versions.desktop
    if (this.heightRatio(topOffset) > this.widthRatio()) {
      return {
        display: this.state.imageLoaded ? 'block' : 'none',
        width: byRatio(width, this.widthRatio()),
        height: byRatio(height, this.widthRatio()),
      }
    }
    return {
      display: this.state.imageLoaded ? 'block' : 'none',
      width: byRatio(width, this.heightRatio(topOffset)),
      height: byRatio(height, this.heightRatio(topOffset)),
    }
  }

  heightRatio(topOffset) {
    return ceiling(maxHeight(topOffset) / this.props.photo.versions.desktop.height, 1)
  }

  widthRatio() {
    return ceiling(maxWidth() / this.props.photo.versions.desktop.width, 1)
  }

  render() {
    const { photo, topOffset, classes } = this.props
    const { urls, versions } = photo

    return (
      <img
        style={{ ...this.calculateImageDimensions(photo, topOffset) }}
        ref={this.image}
        onLoad={this.handleImageLoad}
        src={photo.urls.desktop}
        srcSet={Object.keys(versions).map(
          key => `${versions[key].url} ${versions[key].width}w`
        ).join(', ')}
        alt={photo.alt}
        className={classes.image} />
    )
  }
}

export default withStyles(styles)(FullScreenPhoto)

@@ -121,16 +121,25 @@
 %0A  image
+Container
 : %7B%0A    
@@ -217,16 +217,69 @@
 ',%0A  %7D,%0A
+  image: %7B%0A    width: '100%25',%0A    height: '100%25'%0A  %7D%0A
 %7D)%0A%0Acons
@@ -1422,32 +1422,48 @@
 ImageDimensions(
+) %7B%0A    const %7B 
 photo, topOffset
@@ -1458,27 +1458,39 @@
 o, topOffset
-) %7B
+ %7D = this.props
 %0A    if (!th
@@ -1681,68 +1681,8 @@
 n %7B%0A
-        display: this.state.imageLoaded ? 'block' : 'none',%0A
     
@@ -1810,66 +1810,8 @@
 n %7B%0A
-      display: this.state.imageLoaded ? 'block' : 'none',%0A
     
@@ -1935,16 +1935,169 @@
  %7D%0A  %7D%0A%0A
+  showPhoto() %7B%0A    if (!this.state.isClient %7C%7C !this.state.imageLoaded) %7B%0A      return %7B display: 'none', %7D%0A    %7D%0A    return %7B display: 'block', %7D%0A  %7D%0A%0A
   height
@@ -2340,19 +2340,8 @@
 oto,
- topOffset,
  cla
@@ -2422,11 +2422,54 @@
    %3C
-img
+div%0A        className=%7Bclasses.imageContainer%7D
 %0A   
@@ -2519,29 +2519,107 @@
 ons(
-photo, topOffset) %7D%7D%0A
+) %7D%7D%3E%0A        %3Cimg%0A          style=%7B%7B ...this.showPhoto() %7D%7D%0A          className=%7Bclasses.image%7D%0A  
     
@@ -2631,32 +2631,34 @@
 ef=%7Bthis.image%7D%0A
+  
         onLoad=%7B
@@ -2679,16 +2679,18 @@
 geLoad%7D%0A
+  
         
@@ -2722,16 +2722,18 @@
         
+  
 srcSet=%7B
@@ -2759,16 +2759,18 @@
 s).map(%0A
+  
         
@@ -2825,16 +2825,18 @@
 idth%7Dw%60%0A
+  
         
@@ -2857,16 +2857,18 @@
         
+  
 alt=%7Bpho
@@ -2878,44 +2878,23 @@
 alt%7D
+ /%3E
 %0A      
-  className=%7Bclasses.image%7D /
+%3C/div
 %3E%0A  

Fix 'jumping' effect when changing photos