'use strict';

import React, {Component} from 'react';
import ReactNative, {
    View,
    Text,
    Image,
    
    StyleSheet,
    Dimensions,
    TouchableOpacity,
} from 'react-native';
import ListView from 'deprecated-react-native-listview'

import KeywordCell from './KeywordCell';

export default class SearchKeyword extends Component {

    constructor(props) {
        super(props);

        this._renderRow = this._renderRow.bind(this);
        this._renderSeparator = this._renderSeparator.bind(this);

        this.dataSource = new ListView.DataSource({
            rowHasChanged: (r1, r2) => !Immutable.is(r1, r2),
            sectionHeaderHasChanged: (s1, s2) => !Immutable.is(s1, s2),
        });
    }

    componentDidMount() {
        this.searchBar && this.searchBar.focus();
    }

    _renderRow(rowData, sectionID, rowID) {
        if (rowData.size == 0) {
            return null;
        }

        let icon = rowID == 0 ? require('../../../images/shijian.png') : require('../../../images/huo.png');
        let title = rowID == 0 ? '最近搜索' : '热门搜索';
        let onPressAction = rowID == 0 ? this.props.onPressClearHistory : null;
        return (
            <KeywordCell
                key={'row' + rowID}
                icon={icon}
                title={title}
                list={rowData}
                onPressAction={onPressAction}
                onPressKeyword={(keyword, androiddata, index) => {
                    this.props.onPressKeyword && this.props.onPressKeyword(keyword, androiddata, index, rowID);
                }}
            />
        );
    }

    _renderSeparator(sectionID, rowID, adjacentRowHighlighted) {
        if (rowID == 0 && this.props.history.size > 0) {
            return (
                <View key={'sep' + rowID} style={styles.separator}>
                    <View style={styles.line}/>
                </View>
            );
        }

        return null;
    }

    render() {
        let {history, hot} = this.props;
        let list = [history, hot];

        return (
            <View style={styles.container}>
                <ListView
                    contentContainerStyle={styles.contentContainer}
                    enableEmptySections={true}
                    dataSource={this.dataSource.cloneWithRows(list)}
                    renderRow={this._renderRow}
                    renderSeparator={this._renderSeparator}
                    keyboardDismissMode={'on-drag'}
                />

            </View>
        );
    }
}

let {width, height} = Dimensions.get('window');


let styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: 'white',
    },
    contentContainer: {

    },
    separator: {
        height: 15,
    },
    line: {
        marginLeft: 30, 
        top: 10 ,
        height: 1,
        backgroundColor: '#e5e5e5',
    },
});