import React, { Component } from 'react';
import {
    FlatList,   
    View,
    TouchableOpacity,
    Keyboard
} from 'react-native';
import {CustomInput} from './CustomInput'
import Icon from './Icon'
import Text from './Text'
// var ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 });
export default class SearchableDropDown extends Component {
    constructor(props) {
        super(props);
        this.state = {
            item: {},
            listItems: [],
            focus: false,
        };
        this.renderList = this.renderList.bind(this);
    };

    renderList() {
        if (this.state.focus) {
            return (
                <FlatList
                    style={{ ...this.props.itemsContainerStyle ,borderBottomRightRadius:50}}
                    keyboardShouldPersistTaps="always"
                    data={ds.cloneWithRows(this.state.listItems)}
                    keyExtractor={(item, index) => index.toString()}
                    renderItem={({ item }) => this.renderItems(item)} />
            )
        }
    }

    renderFlatList() {
        if (this.state.focus) {
            return (
                <FlatList
                    style={{ ...this.props.itemsContainerStyle }}
                    keyboardShouldPersistTaps="always"
                    data={this.state.listItems}
                    keyExtractor={(item, index) => index.toString()}
                    renderItem={({ item }) => this.renderItems(item)} />
            )
        }
    }

    componentDidMount() {
        const listItems = this.props.items;
        const defaultIndex = this.props.defaultIndex;
        if (defaultIndex && listItems.length > defaultIndex) {
            this.setState({
                listItems,
                item: listItems[defaultIndex]
            });
        }
        else {
            this.setState({ listItems });
        }
    }

    searchedItems = (searchedText) => {
        var ac = this.props.items.filter(function (item) {
            return item.name.toLowerCase().indexOf(searchedText.toLowerCase()) > -1;
        });
        let item = {
            id: -1,
            name: searchedText
        }
        this.setState({ listItems: ac, item: item });

        const onTextChange = this.props.onTextChange;
        if (onTextChange && typeof onTextChange === 'function') {
            setTimeout(() => {
                onTextChange(searchedText);
            }, 0);
        }
    };

    renderItems = (item) => {
        return (
            <TouchableOpacity style={{ ...this.props.itemStyle }} onPress={() => {
                this.setState({ item: item, focus: false });
                Keyboard.dismiss();
                setTimeout(() => {
                    this.props.onItemSelect(item);
                }, 0);
            }}>
                <Text style={{ ...this.props.itemTextStyle }}>{item.name}</Text>
            </TouchableOpacity>
        );
    };

    renderListType() {
        return this.props.listType == 'ListView' ? this.renderList() : this.renderFlatList();
    }

    render() {
        return (
            <View keyboardShouldpersist='always' style={{ ...this.props.containerStyle }}>
                <View style={{ width: '10%', backgroundColor: 'white' , height:40 , borderBottomLeftRadius:50,borderTopLeftRadius:50 , paddingTop:10,paddingLeft:15 }}>
                    <Icon name='ic_location' color='#269A21' size={14} />
                </View>
                <View style={{ width: '80%', backgroundColor: 'white' }}>
                    <CustomInput
                        underlineColorAndroid={this.props.underlineColorAndroid}
                        onFocus={() => {
                            this.setState({
                                focus: true,
                                item: {
                                    name: '',
                                    id: 0
                                },
                                listItems: this.props.items
                            });
                        }}
                        onBlur={() => {
                            this.setState({ focus: false })
                        }}
                        ref={(e) => this.input = e}
                        onChangeText={(text) => {
                            this.searchedItems(text)
                        }
                        }
                        afterInput={'#269A21'}
                        inputTextAlign={'left'}
                        value={this.state.item.name}
                        style={{ ...this.props.textInputStyle , fontWeight:undefined ,color:'#269A21'}}
                        placeholderTextColor={this.props.placeholderTextColor}
                        placeholder={this.props.placeholder} />
                    {this.renderListType()}
                </View>
                <View style={{ width: '10%', backgroundColor: 'white', height:40,borderBottomRightRadius:50,borderTopRightRadius:50 , paddingTop:10}}>
                    <Icon name='ic_filter' color='#269A21' size={14} />
                </View>
            </View>
        );
    };
}
