'use strict'

import React, {Component} from 'react';
import {
    View,
    Text,
    TouchableOpacity,
    Platform,
    Dimensions,
    StyleSheet,
} from 'react-native';

export default class SectionSelector extends Component {

    static propTypes = {
        sections: React.PropTypes.arrayOf(
            React.PropTypes.shape({
                forumCode: React.PropTypes.number.isRequired,
                forumName: React.PropTypes.string.isRequired,
            }),
        ),
        selectedSectionName: React.PropTypes.string.isRequired,
        hidden: React.PropTypes.bool,
        onPressSection: React.PropTypes.func,
    };

    constructor(props) {
        super(props);

    }

    componentDidMount() {

    }

    render() {
        let {sections, selectedSectionName, hidden} = this.props;
        if (hidden) {
            return null;
        }
        return (
            <View style={styles.container}>
                {sections.map((item, i) => {
                    let backgroundColor = item.forumName === this.props.selectedSectionName ? '#cccccc' : 'white';
                    return (
                        <Text
                            key={i}
                            style={[styles.text, {backgroundColor,}]}
                            numberOfLines={1}
                            onPress={() => {
                                this.props.onPressSection && this.props.onPressSection(item.forumName, item.forumCode);
                                this.props.onPressBlurAll && this.props.onPressBlurAll();
                            }}
                        >
                            {item.forumName}
                        </Text>
                    );
                })}
            </View>
        );
    }
}

let {width, height} = Dimensions.get('window');

const styles = StyleSheet.create({
    container: {
        flex: 1,
        flexDirection: 'row',
        flexWrap: 'wrap',
        justifyContent: 'space-between',
        padding: 15,
        paddingTop: 10,
    },
    text: {
        height: 21,
        paddingTop: 3,
        // minWidth: Math.ceil((width - 45) / 3),
        width:((width - 45) / 3),
        borderColor: '#a0a0a0',
        marginBottom: 10,
        backgroundColor: '#f2f2f2',
        borderWidth: 0.5,
        fontSize: 14,
        textAlign: 'center',
    },
});