/* @flow */
'use strict'

import Relay from 'react-relay'
import React from 'react'
import { Dimensions, View, StyleSheet } from 'react-native'

import Artwork from './artwork'
import Spinner from '../spinner'

class GenericArtworksGrid extends React.Component {
  state: {
    sectionDimension: number,
    artworks: [Object];
  };

  static defaultProps = {
    sectionDirection: 'column',
    sectionCount: Dimensions.get('window').width > 700 ? 3 : 2,
    sectionMargin: 20,
    itemMargin: 20
  }

  constructor(props) {
    super(props)
    this.state = {
      sectionDimension: 0,
      artworks: this.props.artworks,
    }

    this.onLayout = this.onLayout.bind(this)
  }

  componentWillReceiveProps(nextProps) {
    this.setState({ artworks: nextProps.artworks })
  }

  onLayout = (event: SyntheticEvent) => {
    const layout = event.nativeEvent.layout
    if (layout.width > 0) {
      const sectionMargins = this.props.sectionMargin * (this.props.sectionCount - 1)
      this.setState({ sectionDimension: (layout.width - sectionMargins) / this.props.sectionCount })
    }
  }

  sectionedArtworks() {
    const sectionedArtworks = []
    const sectionRatioSums = []
    for (let i = 0; i < this.props.sectionCount; i++) {
      sectionedArtworks.push([])
      sectionRatioSums.push(0)
    }

    const artworks = this.state.artworks
    for (let i = 0; i < artworks.length; i++) {
      const artwork = this.state.artworks[i]

      if (artwork.image) {
        let lowestRatioSum = Number.MAX_VALUE
        let sectionIndex = null
        for (let j = 0; j < sectionRatioSums.length; j++) {
          const ratioSum = sectionRatioSums[j]
          if (ratioSum < lowestRatioSum) {
            sectionIndex = j
            lowestRatioSum = ratioSum
          }
        }

        const section = sectionedArtworks[sectionIndex]
        section.push(artwork)

        // total section aspect ratio
        const aspectRatio = artwork.image.aspect_ratio || 1
        sectionRatioSums[sectionIndex] += (1 / aspectRatio)
      }
    }
    return sectionedArtworks
  }

  renderSections() {
    const spacerStyle = {
      height: this.props.itemMargin,
    }
    const sectionedArtworks = this.sectionedArtworks()
    const sections = []
    for (let i = 0; i < this.props.sectionCount; i++) {
      const artworkComponents = []
      const artworks = sectionedArtworks[i]
      for (let j = 0; j < artworks.length; j++) {
        artworkComponents.push(<Artwork artwork={artworks[j]} key={'artwork-' + j} />)
        if (j < artworks.length - 1) {
          artworkComponents.push(<View style={spacerStyle} key={'spacer-' + j} accessibilityLabel="Spacer View" />)
        }
      }

      const sectionSpecificStlye = {
          width: this.state.sectionDimension,
          marginRight: (i === this.props.sectionCount - 1 ? 0 : this.props.sectionMargin),
      }
      sections.push(
        <View style={[styles.section, sectionSpecificStlye]} key={i} accessibilityLabel={'Section ' + i}>
          {artworkComponents}
        </View>
      )
    }
    return sections
  }

  render() {
    const artworks = this.state.sectionDimension ? this.renderSections() : null
    return (
      <View onLayout={this.onLayout}>
        <View style={styles.container} accessibilityLabel="Artworks Content View">
          {artworks}
        </View>
        {this.state.fetchingNextPage ? <Spinner style={styles.spinner} /> : null}
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
  },
  section: {
    flex: 1,
    flexDirection: 'column',
  },
  spinner: {
    marginTop: 20,
  },
})

const GenericArtworksGridContainer = Relay.createContainer(GenericArtworksGrid, {
  fragments: {
    artworks: () => Relay.QL`
      fragment on Artwork @relay(plural: true) {
        title
        date
        sale_message
        image {
          url(version: "large")
          aspect_ratio
        }
        artist {
          name
        }
        partner {
          name
        }
        href
      }
    `,
  }
})

export default GenericArtworksGridContainer

@@ -173,41 +173,8 @@
 ork'
-%0Aimport Spinner from '../spinner'
 %0A%0Acl
@@ -268,32 +268,8 @@
 er,%0A
-    artworks: %5BObject%5D;%0A
   %7D;
@@ -529,45 +529,8 @@
  0,%0A
-      artworks: this.props.artworks,%0A
     
@@ -586,106 +586,8 @@
  %7D%0A%0A
-  componentWillReceiveProps(nextProps) %7B%0A    this.setState(%7B artworks: nextProps.artworks %7D)%0A  %7D%0A%0A
   on
@@ -1128,37 +1128,37 @@
 artworks = this.
-state
+props
 .artworks%0A    fo
@@ -1191,32 +1191,32 @@
 .length; i++) %7B%0A
+
       const artw
@@ -1221,27 +1221,16 @@
 twork = 
-this.state.
 artworks
@@ -3149,90 +3149,8 @@
 ew%3E%0A
-        %7Bthis.state.fetchingNextPage ? %3CSpinner style=%7Bstyles.spinner%7D /%3E : null%7D%0A
     
@@ -3317,45 +3317,8 @@
  %7D,%0A
-  spinner: %7B%0A    marginTop: 20,%0A  %7D,%0A
 %7D)%0A%0A

Remove code left-over from copying the paging grid.