'use strict';

import React from 'react';
import ReactNative from 'react-native';
import Swiper from 'react-native-swiper';
import HeadTitleCell from '../cell/HeadTitleCell';
import YH_Image from '../../../common/components/YH_Image';
import Immutable, {Map} from 'immutable';

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

export default class TrendgoodsTopic extends React.Component {

    constructor(props) {
        super (props);

        this.dot = <View
            style={{
                backgroundColor:'rgba(237, 237, 237, 0.5)',
                width: 5,
                height: 5,
                borderRadius: 2.5,
                marginLeft: 3,
                marginRight: 3,
                marginTop: (Platform.OS === 'ios')?3:1,
                marginBottom: 0,
            }}
        />;
        this.activeDot = <View
            style={{
                backgroundColor:'white',
                width: 5,
                height: 5,
                borderRadius: 2.5,
                marginLeft: 3,
                marginRight: 3,
                marginTop: 3,
                marginBottom: 0,
            }}
        />;
    }

    shouldComponentUpdate(nextProps){
        if (Immutable.is(nextProps.data, this.props.data)) {
            return false;
        } else {
            return true;
        }
    }

    render() {

        let {title, list} = this.props.data.toJS();

        let data = list;

        if (data.length == 1) {
            let url = YH_Image.getSlicedUrl(data[0].src, sliderWidth, sliderHeight, 2);
            return (
                <TouchableOpacity
                    activeOpacity={1}
                    style={{width: sliderWidth, height: sliderHeight}}
                    onPress={() => {
                        this.props.onPressSlideItem && this.props.onPressSlideItem(data[0].url, 0);
                    }}
                >
                    <YH_Image
                        url={url}
                        style={{ width: sliderWidth, height: sliderHeight}}
                    />
                </TouchableOpacity>
            );
        } else {
            return (
                <View style={styles.container}>
                    <HeadTitleCell title={title.title} moreUrl={title.more_url} onPressTitleMore={this.props.onPressTitleMore} />
                    <Swiper
                        showsButtons={false}
                        loop={true}
                        autoplay={true}
                        autoplayTimeout={3}
                        dot={this.dot}
                        activeDot={(Platform.OS === 'ios') ? this.activeDot : null}
                        width={sliderWidth}
                        height={sliderHeight}
                        paginationStyle={{
                            backgroundColor: 'rgba(68, 68, 68, 0.2)',
                            bottom: 50,
                            height: 10,
                            width: data.length * 12,
                            borderRadius: 5,
                            marginLeft: (sliderWidth - data.length * 12)/2,
                            paddingBottom: 3,
                        }}
                    >
                        {data.map((item, i) => {
                            let url = YH_Image.getSlicedUrl(item.src, sliderWidth, sliderHeight, 2);
                            return (
                                <TouchableOpacity
                                    key={i}
                                    activeOpacity={1}
                                    onPress={() => {
                                        this.props.onPressTrendTopicItem && this.props.onPressTrendTopicItem(item.url, i);
                                    }}
                                >   
                                    <View style={styles.page}>
                                        <YH_Image url={url} style={styles.pageImage} />
                                        <Text style={styles.itemTitle} numberOfLines={1}>{item.title}</Text>
                                        <View style={styles.timeContainer}>
                                            <Image source={require('../../images/shared_time_icon.png')} style={styles.icon} />
                                            <Text style={styles.timeText}>{item.publish_time}</Text>
                                        </View>
                                    </View>
                                </TouchableOpacity>
                            );
                        })}
                    </Swiper>
                </View>
            );
        }
    }
}

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

const DEVICE_WIDTH_RATIO = width / 320;

let imageWidth = width - 15 * 2;
let imageHeight = Math.ceil(182 * DEVICE_WIDTH_RATIO);

let pageHeight = imageHeight + 15 + 16 + 9 + 12 + 30;
let containerHeight = 40 + 15 + pageHeight;

let sliderWidth = width;
let sliderHeight = containerHeight;

let styles = StyleSheet.create({
    container: {
        width,
        height: containerHeight,
        backgroundColor: 'white',
    },
    page: {
        alignItems: 'center',
        marginTop: 15,
        height: pageHeight,
    },
    pageImage: {
        width: imageWidth,
        height: imageHeight,
    },
    itemTitle: {
        fontFamily: 'STHeitiSC-Medium',
        fontSize: 16,
        color: '#444444',
        marginTop: 15,
        width: imageWidth,
    },
    timeContainer: {
        flexDirection: 'row',
        marginTop: 9,
        width: imageWidth,
        height: 12,
    },
    icon: {
        width: 12,
        height: 12,
    },
    timeText: {
        fontSize: 11,
        textAlign: 'left',
        marginLeft: 5,
        color: '#b0b0b0',
    },
});