'use strict';

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

import KeywordCell from './KeywordCell';
import YH_SearchBar from '../../../common/components/YH_SearchBar';

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={this.props.onPressKeyword}
            />
        );
    }

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

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

        return (
            <View style={[styles.container, style]}>
                <YH_SearchBar
                    ref={(c) => {
                        this.searchBar = c;
                    }}
                />
                <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,
        position: 'absolute',
        top: 0,
        left: 0,
        width,
        height,
        backgroundColor: 'white',
    },
    contentContainer: {
        
    },
    separator: {
        height: 15,
    },
    line: {
        marginHorizontal: 30, 
        top: 10 , 
        height: 1, 
        backgroundColor: '#e5e5e5',
    },
});