'use strict';

import React from 'react';
import ReactNative from 'react-native';
import Swiper from 'react-native-swiper';
import ImmutablePropTypes from 'react-immutable-proptypes';

const {
    View,
    Text,
    TouchableOpacity,
    StyleSheet,
    Dimensions,
} = ReactNative;

export default class Notice extends React.Component {

    static propTypes = {
        data: ImmutablePropTypes.listOf(
            ImmutablePropTypes.contains({
                title: React.PropTypes.string.isRequired,
                url: React.PropTypes.string.isRequired,
            })
        ),
        duration: React.PropTypes.number,
        width: React.PropTypes.number.isRequired,
        height: React.PropTypes.number.isRequired,
        onPress: React.PropTypes.func,
    };

    constructor(props) {
        super (props);

    }

    render() {
        let width = this.props.width;
        let height = this.props.height;
        let data = this.props.data.toArray();

        return (
            <View style={styles.container}>
                <Text style={styles.notice}>公告</Text>
                <Swiper
                    style={styles.banner}
                    horizontal={false}
                    showsButtons={false}
                    loop={true}
                    autoplay={true}
                    autoplayTimeout={this.props.duration}
                    showsPagination={false}
                    dot={this.dot}
                    activeDot={this.activeDot}
                    height={height}
                    scrollEnabled={false}
                >
                    {data.map((item, i) => {
                        return (
                            <TouchableOpacity
                                key={i}
                                activeOpacity={1}
                                onPress={() => {
                                    this.props.onPress && this.props.onPress(item.get('url'));
                                }}
                                style={{height: height, justifyContent: 'center', marginRight: 65,}}
                            >
                                <Text style={styles.text} numberOfLines={1}>{item.get('title')}</Text>

                            </TouchableOpacity>
                        );
                    })}
                </Swiper>
            </View>
        );
    }
}

let styles = StyleSheet.create({
    container: {
        flexDirection: 'row',
        alignItems: 'center',
        backgroundColor: 'white',
        borderBottomWidth: 0.5,
        borderBottomColor: '#e0e0e0',
    },
    notice: {
        marginLeft: 15,
        marginRight: 5,
        paddingVertical: 5,
        paddingHorizontal: 10,
        backgroundColor: 'black',
        fontSize: 12,
        color: 'white',
    },
    banner: {

    },
    text: {
        fontFamily: 'Helvetica Light',
        fontSize: 13,
        color: 'black',
    },
});