/**
 * Created by jone on 2017/4/10.
 */
import React, {Component} from 'react';

import {
    View,
    Text,
    TouchableWithoutFeedback,
    StyleSheet,
    TouchableOpacity,
    Image,
    Dimensions,
} from 'react-native';
import Switch from 'react-native-switch-pro';

export default class SettingCell extends Component {
    constructor(props) {
        super(props);
        this.isSwitch = false;
        this.isGide = false;
        this.rightTv = '';
        this.isPush = false;
        this.pushTip = '';
        this.isNew = false;
        this.state = {
            value: false
        };
        this.images = {
            1: require('../../images/mine_message_icon.png'),
            2: require('../../images/mine_setting_network.png'),
            3: require('../../images/mine_setting_delete_icon.png'),
            4: require('../../images/mine_setting_about_icon.png'),
            5: require('../../images/mine_setting_recommond.png'),
            6: require('../../images/mine_setting_recommond.png'),
        }
    }


    render() {
        let {orderId, isSwitch, isGide, rightTv, cellData, isPush,isNew}   = this.props;

        if (orderId == '2' || orderId == '6') {
            this.isSwitch = true;
        }
        if (isGide) {
            this.isGide = isGide;
        }
        if (isPush) {
            this.isPush = isPush;
        }

        if (isNew){
            this.isNew = isNew;
        }
        if (this.isPush && this.isGide && this.props.cellData.settingInfo.isOpenPush == false){
            this.pushTip= '您可能错过物流动态、优惠促销等消息 \n您可以在系统设置中更改'
        }else{
            this.pushTip = '';
        }
        if (rightTv && rightTv.length > 0) {
            this.rightTv = rightTv;
        }
        let icon = this.images[orderId];


        return (
            <View style={styles.containerStyls}>
                <View style={styles.container}>
                    <View style={styles.leftViewStyle}>
                        <Image source={icon} style={styles.leftImgStyle}></Image>
                    </View>

                    <View style={styles.rightViewStyle}>
                        <Text>{this.props.leftText}</Text>
                        {this.renderRightView()}

                    </View>
                </View>
                <View
                    style={styles.lineViewStyle}
                />
                {this.renderPushTips()}
            </View>

        )
    }

    renderRightView() {
        if (this.isSwitch) {
            return (
                <Switch
                    width={50}
                    height={25}
                    value={this.props.isSwitch}
                    onSyncPress={value => {this.props.onPressItem(this.props.orderId,value)}}
                > </Switch>
            );
        } else if (this.isGide) {
            if (this.isPush) {
                if (this.props.cellData.settingInfo.isOpenPush == false) {
                    return (
                        <View style={styles.dotViewStyle}>
                            <Text style={{alignItems: 'center',}}>去开启</Text>
                            <View
                                style={styles.pushDotContainer}
                            />
                            <Image
                                source={ require('../../images/mine_setting_righticon.png')}
                            />
                        </View>

                    );
                } else {
                    return (
                        <Text>已开启</Text>
                    );
                }
            } else if(this.isNew == true){
                return(
                    <View style={styles.dotViewStyle}>
                        <Image
                            style={{marginRight:4}}
                            source={ require('../../images/mine_setting_app_new.png')}
                        />
                        <Image
                            source={ require('../../images/mine_setting_righticon.png')}
                        />
                    </View>
                );
            }else {

                return (
                    <Image
                        source={ require('../../images/mine_setting_righticon.png')}
                    />
                );
            }

        } else {
            return (
                <Text>{this.rightTv}</Text>
            );
        }
    }
    renderPushTips(){
        if ( this.pushTip && this.pushTip.length > 0){
            return (
                <Text style={styles.pushTipsStyle}>
                    {this.pushTip}
                </Text>
            );
        }
    }

};
let {width, height} = Dimensions.get('window');
let styles = StyleSheet.create({
    container: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
        backgroundColor: 'white',
        paddingLeft: 10,
        paddingRight: 10,
        height:45
    },
    leftViewStyle: {
        flexDirection: 'row'
    },
    rightViewStyle: {
        flexDirection: 'row',
        flex: 1,
        justifyContent: 'space-between',
        alignItems: 'center'
    },
    leftImgStyle: {
        marginRight: 10
    },
    lineViewStyle: {
        height: 1,
        backgroundColor: '#e0e0e0',
        marginLeft: 40,
    },
    containerStyls: {
        backgroundColor: 'white',
    },
    dotViewStyle: {
        flexDirection: 'row',
        alignItems:'center',
    },
    pushTipsStyle:{
        marginLeft: 40,
        borderBottomWidth:1,
        borderBottomColor:'#e0e0e0',
        paddingTop:5,
        paddingBottom:5,
    },
    pushDotContainer: {
        height: 7,
        marginTop: -8,
        marginLeft: 2,
        marginRight:2,
        backgroundColor: '#d0021b',
        justifyContent: 'center',
        borderRadius: 10,
        minWidth: 7,
    },

});