'use strict';

import React from 'react';
import ReactNative from 'react-native';
import Immutable, {Map} from 'immutable';
import DeviceInfo from 'react-native-device-info';
import {getSlicedUrl} from '../../../classify/utils/Utils';
import {removeHTMLTag} from '../../utils/Helper';
import YH_Image from '../../../common/components/YH_Image';

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

const BODY_TAG_PATTERN = /\<\/ *body\>/;

var script = `
;(function() {
var wrapper = document.createElement("div");
wrapper.id = "height-wrapper";
while (document.body.firstChild) {
    wrapper.appendChild(document.body.firstChild);
}
document.body.appendChild(wrapper);
var i = 0;
function updateHeight() {
    document.title = wrapper.clientHeight;
    window.location.hash = ++i;
}
updateHeight();
window.addEventListener("load", function() {
    updateHeight();
    setTimeout(updateHeight, 1000);
});
window.addEventListener("resize", updateHeight);
}());
`;


const style = `
<style>
body, html, #height-wrapper {
    margin: 0;
    padding: 0;
}
#height-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}
</style>
<script>
${script}
</script>
`;

const codeInject = (html) => html.replace(BODY_TAG_PATTERN, style + "</body>");

export default class Header extends React.Component {

    constructor(props) {
        super (props);
    }

    shouldComponentUpdate(nextProps,nextState){
        if (Immutable.is(nextProps.resource, this.props.resource) && nextProps.launchProfile==this.props.launchProfile) {
            return false;
        } else {
            return true;
        }
    }

    render() {
        let {resource,launchProfile} = this.props;
        if (!resource) {
            return (<View style={{height:0,width:width,backgroundColor:'white'}}/>);
        }
        let data = resource.toJS();

        let brandName = data.is_show_shop_name?data.shop_name:'';
        let num = data.favoriteCount?data.favoriteCount:0;
        let numberOfFav = '粉丝: '+ num;
        let backgroundImage = data.shopBanner?data.shopBanner.module_data.data[0].pic:'null';
        let brandIcon = getSlicedUrl(data.shop_logo, 60, 60, 2);
        let isFav = data.is_addFav;
        let favImage = isFav?require('../../image/btn_gz_h.png'):require('../../image/btn_gz_n.png');
        //获取字体
        let fontFamilyStyle = {};
        if (Platform.OS === 'ios') {
            let systemVersion = DeviceInfo.getSystemVersion();
            systemVersion = parseFloat(systemVersion);
            if (systemVersion >= 9.0) {
                fontFamilyStyle = {fontFamily: 'PingFang SC'};
            }
        }

        return (
                <View style={{width: width, height: imageHeigth,backgroundColor: 'white'}}>
    				<YH_Image
                        url={backgroundImage}
    					style={{width, height: imageHeigth }}
    				/>
                    <View style={styles.maskView}/>

                    <View style={styles.header}>
                        <Text style={styles.number} numberOfLines={1}>{numberOfFav}</Text>
                        <TouchableOpacity activeOpacity={0.5} onPress={() => {
                            this.props.onPressCollection && this.props.onPressCollection(isFav);
                        }}>
                            <Image source={favImage} style={styles.favImage}/>
                        </TouchableOpacity>
                    </View>
                    <YH_Image
                        url={brandIcon}
                        style={styles.brandIcon}
                    />
                    <Text style={styles.name} numberOfLines={1}>{brandName}</Text>



                </View>
        );
    }
}

let {width, height} = Dimensions.get('window');
let imageHeigth = Math.ceil((234/750)*width);

let styles = StyleSheet.create({
    container: {
		backgroundColor:'white',
    },
    brandIcon: {
        width: 50,
        height: 50,
        position: 'absolute',
        left: 10,
        borderWidth: 1,
        bottom: 10,
        borderColor: '#e0e0e0',
    },
    maskView: {
        width: width,
		height: imageHeigth,
        position: 'absolute',
        top: 0,
        backgroundColor: 'rgba(0,0,0,.25)'
    },
    header: {
        justifyContent: 'flex-end',
        flexDirection: 'row',
        width: width,
		height: 25,
        position: 'absolute',
        bottom: 10,
        backgroundColor: 'transparent',
    },
	name: {
		marginLeft: 10 + 50 + 10,
        marginTop: -14 -10,
        backgroundColor: 'transparent',
        width: 150,
        color: '#ffffff',
        fontWeight: 'bold',
        fontSize: 14,
	},
	number: {
        color: '#ffffff',
        fontSize: 12,
        marginRight: 10,
        marginTop: 8,
        backgroundColor: 'transparent',
	},
    favImage: {
        width: 64,
        height: 25,
        backgroundColor: 'transparent',
        marginRight: 10,
    },
	text: {
		marginLeft: 20,
		width: width-40,
		height: 40,
		backgroundColor: 'white',
		lineHeight: 18,
        fontSize: 14,
        color: '#444444',
	},
	fliter: {
		width: width,
		height: 30,
		backgroundColor: 'white',
		alignItems: 'center',
		justifyContent: 'center',
	},
    pullDown: {
        width: 15,
        height: 8,
    },
});