import React, {Component} from 'react';
import {
    View,
    Text,
} from 'react-native';

import {SearchBar, List,} from '@ant-design/react-native';

import {createAction} from "../../utils";
import {connect} from 'react-redux'
import RefreshFlatList from "react-native-refresh-flatlist";

@connect(home => ({...home}))
class SearchDistributor extends Component {
    constructor(props) {
        super(props);
        this.state = {
            hide: false,
        };
    }

    componentDidMount() {
        //this._fetchData()
    }

    componentWillUnmount() {
        this.props.dispatch({
            type: 'home/clear'
        });
    }

    _onChange = (value) => {
        if (value) {
            this.props.dispatch(createAction('home/searchDist')({keyword: value}));
            this.setState({value: value, hide: false,})
        } else {
            this.setState({value: '', hide: true,})
        }
    }

    _searchDataPress = (id, name) => {
        const {goBack, state} = this.props.navigation;
        //在页面返回，卸载时,将上个页面的方法取到,并回传参数,这样回传的参数会重走render方法
        state.params.callback({id: id, name: name});
        goBack();
    }
    _keyExtractor = (item, index) => item.id.toString();
    _renderItem = (data) => {
        const item = data.item;
        const dist = item.name + ' - ' + item.tel + ' - ' + item.notes
        return (
            <List.Item key={item.id} wrap={true}
                       thumb={<Text style={{fontFamily: 'iconfont', paddingRight: 3}}>{'\ue645'}</Text>}
                       onPress={() => this._searchDataPress(item.id, item.name)}>{dist}</List.Item>
        );

    }

    render() {
        const {searchDistData, searchRState,} = this.props.home;

        return (
            <View style={{flex: 1}}>
                {/*搜索*/}
                <SearchBar placeholder="搜索" showCancelButton
                           cancelText='搜索'
                           value={this.state.value}
                           onCancel={(value) => this._onChange(value)}
                           onSubmit={(value) => this._onChange(value)}
                           onChange={(value) => this._onChange(value)}
                />

                <View style={this.state.hide ? {display: 'none',} : {}}>
                    <RefreshFlatList
                        data={searchDistData}
                        renderItem={this._renderItem}
                        keyExtractor={this._keyExtractor}
                        refreshState={searchRState}
                        ItemSeparatorComponent={() => <View style={{height: 0}}/>}
                        ListHeaderComponent={() => <View style={{height: 0}}/>}
                    />
                </View>
            </View>
        );
    }
}

export default SearchDistributor;