import React from 'react';
import {StyleSheet, View, Text, PixelRatio, FlatList, Image, TouchableHighlight} from 'react-native';
import {Navigation, SharedElementTransition} from 'react-native-navigation';

import images from './images';

const ROW_HEIGHT = 650;
const COLS = 2;

class Masonry extends React.Component {

  onAssetPress = (image, key) => {
    this.props.navigator.push({
      screen: 'example.Transitions.SharedElementTransitions.Masonry.Item',
      sharedElements: [key],
      passProps: {
        image,
        sharedImageId: key,
      },
    });
  };

  renderAsset = (asset, row, column, index) => {
    const key = `row_${row}_column_${column}_asset_${index}`;

    return (
      <TouchableHighlight
        key={key}
        onPress={() => {
          this.onAssetPress(asset.source, key);
        }}
        style={[styles.assetContainer, {flex: asset.weight}]}
      >
        <View style={{flex: 1}}>
          <SharedElementTransition
            style={{flex: 1}}
            sharedElementId={key}
          >
            <Image
              source={asset.source}
              resizeMode={'cover'}
              style={styles.asset}
            />
          </SharedElementTransition>
        </View>
      </TouchableHighlight>
    );
  };

  renderItem = ({item, index}) => {
    return (
      <View style={[styles.item, {height: ROW_HEIGHT}]}>
        {[...new Array(COLS)].map((column, columnIndex) => (
          <View
            key={`row_${index}_column_${columnIndex}`}
            style={{flex: 1}}
          >
            {item.images[columnIndex].map((asset, assetIndex) => this.renderAsset(asset, index, columnIndex, assetIndex))}
          </View>
        ))}
      </View>
    );
  };

  render() {
    return (
      <View style={styles.container}>
        <FlatList
          data={images}
          renderItem={this.renderItem}
          getItemLayout={(layout, index) => ({length: ROW_HEIGHT, offset: ROW_HEIGHT * index, index})}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#ffffff',
  },
  item: {
    flex: 1,
    flexDirection: 'row',
  },
  assetContainer: {
    margin: 5,
    borderRadius: 6,
    borderWidth: StyleSheet.hairlineWidth,
  },
  asset: {
    flex: 1,
    borderRadius: 6,
  },
});

export default Masonry;