/**
 * CityPicker.js
 *@author dennis
 *@createtime 8/22/19
 *@description 城市选着器
 */

'use strict'


import React, {Component}  from 'react'


import {
    Modal,
    StyleSheet,
    TouchableOpacity,
    View,
    Text,
    Image,
    FlatList,
} from 'react-native'

import {bindActionCreators} from 'redux'

import {connect} from 'react-redux'

import {Map} from 'immutable'

import * as allianceActions from '../../reducers/alliance/allianceActions'

const actions = [
    allianceActions,
];


function mapStateToProps(state) {
    return {
        ...state
    };
}

function mapDispatchToProps(dispatch) {

    const creators = Map()
        .merge(...actions)
        .filter(value => typeof value === 'function')
        .toObject();

    return {
        actions: bindActionCreators(creators, dispatch),
        dispatch
    };
}



class CityPicker extends Component{

    constructor(props) {
        super(props)

        this.state = {
            province: '',
            city: '',
            currentLevel: 0,
            currenctProvinceid: 0,
            currentCityid: 0,
            isShow: props.isShow,

        }
    }


    componentDidMount() {

        this.props.actions.getLocationList()
    }

    componentWillReceiveProps(nextProps){
        // if (this.props.isShow != nextProps.isShow) {
            this.setState({
                isShow: nextProps.isShow
            })
        // }
    }

    startDismiss = () => {

        this.props.dismissFun && this.props.dismissFun()

    }

    pressLocationLevel = (level) => {
            this.setState({
                currentLevel: level
            })

    }

    pressItem = (item) => {

        if (this.state.currentLevel == 0) {

            if (item.id !== this.state.currenctProvinceid) {
                this.setState({
                    currenctProvinceid: item.id,
                    province: item.caption,
                    currentCityid: 0,
                    city: ''
                })

                this.props.setCityInfo && this.props.setCityInfo({
                    bankCityId: '',
                    bankLocationStr: '',
                })
                this.props.actions.getLocationSuccess(item.sub, 1)

                this.pressLocationLevel(1)
            }

        } else {
            if (item.id !== this.state.currentCityid) {
                this.setState({
                    currentCityid: item.id,
                    city: item.caption,
                })

                this.props.setCityInfo && this.props.setCityInfo({
                    bankCityId: item.id,
                    bankLocationStr: item.caption,
                })
            }
        }
    }

    renderItem = ({item, index}) => {

        let currentid = this.state.currentLevel == 0 ? this.state.currenctProvinceid : this.state.currentCityid
        let isSelected = item.id == currentid
        return (
            <View style={styles.item}>
                <TouchableOpacity
                    style={[styles.item, styles.itemRow]}
                    activeOpacity={1}
                    onPress={() => {
                        this.pressItem(item)
                    }}
                >
                    <Text style={isSelected ? styles.locationNameChoosen : styles.locationName}>{item.caption}</Text>

                    {isSelected ? <Image
                        resizeMode={'contain'}
                        source={require('../../../brandStore/image/filter/brandstore_filter_selected.png')}
                        style={styles.selectImage}/>: null}


                </TouchableOpacity>
            </View>
        )
    }

    render() {

        let {
            cityLocationInfo
        } = this.props.alliance


        let allData = this.state.currentLevel == 0 ? cityLocationInfo.get('provinceList').toJS() : cityLocationInfo.get('cityList').toJS()

         allData = allData || []

        return (
            <Modal
                visible={this.state.isShow}
                animationType={'none'}
                transparent={true}
                onRequestClose={() => {
                }}
            >
            <View style={styles.container}>
                <View style={[styles.mask]}>
                    <TouchableOpacity
                        activeOpacity={1}
                        onPress={() => {
                            this.startDismiss()
                        }}
                        style={styles.modalBackground}/>
                </View>

                <View style={styles.contentContainer}>
                    <View style={styles.titleContainer}>
                        <Text style={styles.title}>
                            {'开户城市'}
                        </Text>
                        <TouchableOpacity style={styles.closeBtn}
                                          activeOpacity={1}
                                          onPress={this.startDismiss}
                        >
                            <Image
                                resizeMode={'contain'}
                                source={require('../../../studentCertification/images/close.png')}
                                   style={styles.closeBtnImg}>

                            </Image>
                        </TouchableOpacity>
                    </View>

                    <View style={styles.locationChoosenContainer}>
                        <TouchableOpacity
                            activeOpacity={1}
                            style={this.state.currentLevel == 0 ? styles.areaChoosen : null}
                            onPress={() => {
                                this.pressLocationLevel(0)
                            }}
                        >

                            <Text style={this.state.currentLevel == 0 ? styles.areaCurrent : styles.area}>{this.state.province || '请选择'}</Text>
                        </TouchableOpacity>
                        <TouchableOpacity
                            activeOpacity={1}
                            style={this.state.currentLevel == 1 ? styles.areaChoosen : null}
                            onPress={() => {
                                this.pressLocationLevel(1)
                            }}
                        >
                            <Text style={this.state.currentLevel == 1 ? styles.areaCurrent : styles.area}>{this.state.city || '请选择'}</Text>
                        </TouchableOpacity>

                    </View>

                        <FlatList
                            renderItem={this.renderItem}
                            data={allData}
                            initialNumToRender={100}
                            keyExtractor={(item, index) => '' + index}
                            showsVerticalScrollIndicator={false}
                            style={styles.contentlist}
                        />

                </View>




            </View>
            </Modal>
        )
    }
}


const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'flex-end'
    },
    modalBackground: {
        flex: 1,
    },

    mask: {
        position: 'absolute',
        top: 0,
        left: 0,
        right: 0,
        bottom: 0,
        backgroundColor: 'rgba(0, 0, 0, 1)',
        opacity: 0.4
    },

    contentContainer: {
        paddingTop: 20,
        backgroundColor: '#FFFFFF',
        overflow: 'hidden',
        paddingBottom: 3,
    },

    titleContainer: {
        flexDirection: 'row',
        alignItems: 'center',
        height: 40,

    },

    title: {
      flex: 1,
        textAlign: 'center',
        fontSize: 18,
        color: 'gray'
    },

    closeBtn: {
        width: 25,
        height: 25,
        marginRight: 10,
    },

    closeBtnImg: {
        width: 15,
        height: 15,
    },

    selectImage: {
      tintColor: 'red',
    marginLeft: 10,
    },

    locationChoosenContainer: {
        flexDirection: 'row',
        height: 35,
        borderBottomWidth: 1,
        borderBottomColor: '#f5f5f5',
        // paddingLeft: 20,
    },

    areaChoosen: {

        borderBottomWidth: 2,
        borderBottomColor: 'red'
    },

    area: {
        fontSize: 15,
        color: 'black',
        marginHorizontal: 10,
    },

    areaCurrent: {
        fontSize: 15,
        color: 'red',
        marginHorizontal: 10,
    },

    locationName: {
        fontSize: 15,
        color: 'black'
    },

    locationNameChoosen: {
        fontSize: 15,
        color: 'red'
    },

    contentlist: {
        height: 200,
        paddingTop: 20,
        paddingLeft: 20,

    },

    item: {

        height: 40,
        justifyContent: 'flex-start',

    },

    itemRow: {
       flexDirection: 'row'
    }

})



export default connect(mapStateToProps, mapDispatchToProps)(CityPicker)