'use strict';

import React from 'react';
import ReactNative from 'react-native';

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

let {width, height} = Dimensions.get('window');
let titleMarginLeft = Math.ceil(50 * width / 320);
let titleWidth = Math.ceil(210 * width / 320);
let titleItemWidth = Math.ceil(titleWidth / 3) - 3;

export default class NavBarTitle extends React.Component {

    constructor(props) {
        super (props);

    }

    renderGuangTitle() {
        if (width == 320) {
            return (
                <Text style={[styles.text, {marginLeft: 6.5, marginTop: 2}]}>逛</Text>
            );
        } else if (width == 375) {
            return (
                <Text style={[styles.text, {marginLeft: 6.5, marginTop: 2}]}>逛</Text>
            );
        } else {
            return (
                <Text style={[styles.text, {marginLeft: 7.2}]}>逛</Text>
            );
        }
    }

    renderGuangTitle1() {
        if (width == 320) {
            return 6;
        } else if (width == 375) {
            return 5.5;
        } else {
            return 7;
        }
    }

    renderCommunityTitle() {
        if (width == 320) {
            return (
                <View style={[{}]}>
                    <Text style={[styles.text, {marginLeft: -4, marginTop: 2}]}>社区</Text>
                    <Image
                        style={{
                            position: 'absolute',
                            left: titleItemWidth / 2 + 1.5,
                            top: -9,
                            width: 20,
                            height: 10,
                            marginLeft: -5.5
                        }}
                        resizeMode={'contain'}
                        source={require('../../images/home/nav_new.png')}
                    />
                </View>
            );
        } else if (width == 375) {
            return (
                <View style={[{}]}>
                    <Text style={[styles.text, {marginLeft: -17, marginTop: 2}]}>社区</Text>
                    <Image
                        style={{
                            position: 'absolute',
                            left: titleItemWidth / 2,
                            top: -9,
                            width: 20,
                            height: 10,
                            marginLeft: -17
                        }}
                        resizeMode={'contain'}
                        source={require('../../images/home/nav_new.png')}
                    />
                </View>
            );
        } else {
            return (
                <View style={[{}]}>
                    <Text style={[styles.text, {marginLeft: -23}]}>社区</Text>
                    <Image
                        style={{
                            position: 'absolute',
                            left: titleItemWidth / 2,
                            top: -9.3,
                            width: 20,
                            height: 10,
                            marginLeft: -23
                        }}
                        resizeMode={'contain'}
                        source={require('../../images/home/nav_new.png')}
                    />
                </View>
            );
        }
    }

    renderShowTitle() {
        if (width == 320) {
            return (
                <View style={[{}]}>
                <Image style={{left: 0, top: 0}} source={require('../../images/home/sd_show_ic.png')}/>
                <Image style={{
                        position: 'absolute',
                        left: titleItemWidth / 2 + 6.5,
                        top: -9.5,
                        width: 20,
                        height: 10,
                    }}
                    resizeMode={'contain'}
                    source={require('../../images/home/nav_hot.png')}
                />
                </View>
            );
        } else if (width == 375) {
            return (
                <View style={[{}]}>
                <Image style={{left: -6.5, top: 0}} source={require('../../images/home/sd_show_ic.png')}/>
                <Image
                    style={{
                        position: 'absolute',
                        left: titleItemWidth / 2 - 0.5,
                        top: -9.5,
                        width: 20,
                        height: 10,
                    }}
                    resizeMode={'contain'}
                    source={require('../../images/home/nav_hot.png')}
                />
                </View>
            );
        } else {
            return (
                <View style={[{}]}>
                <Image style={{left: -10, top: 0.5}} source={require('../../images/home/sd_show_ic.png')}/>
                <Image
                    style={{
                        position: 'absolute',
                        left: titleItemWidth / 2 - 3.5,
                        top: -9,
                        width: 20,
                        height: 10,
                    }}
                    resizeMode={'contain'}
                    source={require('../../images/home/nav_hot.png')}
                />
                </View>
            );
        }
    }

    render() {
        let index = this.props.index;
        let lineTop = 30;
        if (width == 320) {
            lineTop = 31;
        } else if (width == 375) {
            lineTop = 31.2;
        } else {
            lineTop = 30.5;
        }
        return (
            <Animated.View
                style={[
                    styles.title,
                    {
                      opacity: this.props.position.interpolate({
                        inputRange: [index - 1, index, index + 1],
                        outputRange: [0, this.props.titleOpacity, 0],
                      }),
                      left: this.props.position.interpolate({
                        inputRange: [index - 1, index + 1],
                        outputRange: [200, -200],
                      }),
                      right: this.props.position.interpolate({
                        inputRange: [index - 1, index + 1],
                        outputRange: [-200, 200],
                      }),
                    },
                ]}>
                <TouchableOpacity onPress={() => {
                    ReactNative.NativeModules.YH_CommunityHelper.hideRNNavBar(0);
                }}>

                {this.renderGuangTitle()}

                </TouchableOpacity>

                {this.renderCommunityTitle()}

                <TouchableOpacity onPress={() => {
                    ReactNative.NativeModules.YH_CommunityHelper.hideRNNavBar(2);
                }}>
                {this.renderShowTitle()}
                </TouchableOpacity>

                <View style={{
                    backgroundColor: 'white',
                    position: 'absolute',
                    width: 45,
                    height: 2,
                    left: (titleWidth - 45) / 2 + 6,
                    top: lineTop,
                }}/>
            </Animated.View>
        );
    }
}

let styles = StyleSheet.create({
	title: {
		flexDirection: 'row',
		justifyContent: 'space-between',
		alignItems: 'center',
		width: titleWidth,
		marginTop: 11,
		marginLeft: titleMarginLeft,
		  position: 'absolute',
		...Platform.select({
			ios: {
				top: 20,
			},
			android: {
				top: 5,
			},
		}),
		left: 0,
		right: 0,
		backgroundColor: 'transparent',
    },
	text: {
		textAlign: 'center',
		fontSize: 18,
        fontWeight: 'bold',
        color: '#ffffff',
		width: titleItemWidth,
		marginTop: 1,
	},
});