import React, { Component } from 'react';
import {
    StyleSheet,
    View,
} from 'react-native';
import Markdown from 'rnmd';
import PropTypes from 'prop-types';

import Posts from '../../../components/TwoColumnMansonry/Posts';
import { image } from '../../../utils';

export default class ContestSubmissionsMasonry extends Component {
    static propTypes = {
        posts: PropTypes.array.isRequired,
    };
    static defaultProps = {
        posts: [],
    };

    componentWillMount() {
        this.setState({
          postsMasonry: image.mansonry(this.props.posts, 'imageHeight'),
        });
    }
  
    render() {
        return (
            <View style={styles.mansonryContainer}>
                <View>
                    <Posts
                        containerStyle={styles.sceneContainer}
                        posts={this.state.postsMasonry.leftCol}
                    />
                </View>
                <View>
                    <Posts
                        containerStyle={styles.sceneContainer}
                        posts={this.state.postsMasonry.rightCol}
                    />
                </View>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    mansonryContainer: {
        alignItems: 'center',
        flexDirection: 'row',
        flexWrap: 'wrap',
        justifyContent: 'center',
        marginLeft: 0,
        marginRight: 0,
    },
    sceneContainer: {
        marginTop: 10,
    },
})
  