'use strict';

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

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


export default class Announcement extends React.Component {

    constructor(props) {
        super (props);

    }

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

    render() {
        let {headerImage, data, duration} = this.props;

        duration = parseInt(duration);
        duration = duration ? duration : 3;

        let url = YH_Image.getSlicedUrl(headerImage, headImageWidth, headImageHeight, 2);
        data = data.toArray();

        return (
            <View style={styles.container}>
                {headerImage ? <YH_Image style={styles.header} url={url} /> : null}
                {headerImage ? <View style={styles.vLine} /> : null}

                <Image style={styles.icon} source={require('../../images/announcement_speaker_icon.png')} />

                <YH_Swiper
                    style={styles.banner}
                    horizontal={false}
                    showsButtons={false}
                    loop={true}
                    autoplay={true}
                    autoplayTimeout={duration}
                    showsPagination={false}
                    height={containerHeight}
                    scrollEnabled={false}
                >
                    {data.map((item, i) => {
                        let yh_exposureData = item.get('yh_exposureData')?item.get('yh_exposureData').toJS():null;
                        return (
                            <TouchableOpacity
                                key={i}
                                yh_exposureData={yh_exposureData}
                                activeOpacity={1}
                                onPress={() => {
                                    this.props.onPressAnnounceItem && this.props.onPressAnnounceItem(item.get('url'), '', i);
                                }}
                                style={{height: containerHeight, justifyContent: 'center', }}
                            >
                                <Text style={styles.text} numberOfLines={1}>{item.get('title')}</Text>
                            </TouchableOpacity>
                        );
                    })}
                </YH_Swiper>
            </View>
        );
    }
}

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

const DEVICE_WIDTH_RATIO = width / 320;

let containerHeight = Math.ceil(35 * DEVICE_WIDTH_RATIO);

let headImageMarginLeft = 15;
let headImageWidth = Math.ceil(63 * DEVICE_WIDTH_RATIO);
let headImageHeight = Math.ceil(13 * DEVICE_WIDTH_RATIO);

let lineViewMarginLeft = 15;
let lineViewMarginRight = 10;

let iconImageMarginRight = 7;

let textFieldMarginRight = 15;

let textFontSize = 12;

// iPhone 6P
if (height == 736) {
    headImageMarginLeft = 22.5;

    lineViewMarginLeft = 22.5;
    lineViewMarginRight = 15;

    iconImageMarginRight = 10;

    textFieldMarginRight = 22.5;

    textFontSize = 13;
}

let textFieldWidth = width - headImageWidth - headImageMarginLeft
    - lineViewMarginLeft - 12 - lineViewMarginRight - iconImageMarginRight - 5;

let styles = StyleSheet.create({
    container: {
        flexDirection: 'row',
        alignItems: 'center',
        backgroundColor: 'white',
        height: containerHeight,
    },
    header: {
        width: headImageWidth,
        height: headImageHeight,
        marginLeft: headImageMarginLeft,
    },
    vLine: {
        width: 1,
        height: 20,
        marginLeft: lineViewMarginLeft,
        backgroundColor: '#e5e5e5',
    },
    icon: {
        width: 12,
        height: 12,
        marginLeft: lineViewMarginRight,
        marginRight: iconImageMarginRight,
    },
    banner: {

    },
    text: {
        fontFamily: 'STHeitiSC-Medium',
        fontSize: textFontSize,
        color: '#444444',
        width: textFieldWidth,
    },
});