'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';
import SearchKeyword from './SearchKeyword';
import BrandList from './BrandList';

export default class BrandSearch extends Component {

    constructor(props) {
        super(props);

        
    }

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

    

    render() {
        let {history, hot, filtedBrands, keyword, noData, style} = this.props.data;
        let showBrandList = filtedBrands && filtedBrands.size > 0;
        return (
            <View style={[styles.container, style]}>
                <YH_SearchBar
                    ref={(c) => {
                        this.searchBar = c;
                    }}
                    text={keyword}
                    onClickCancel={this.props.onClickCancel}
                    onTextChange={this.props.onTextChange}
                />

                {showBrandList ? 
                    <BrandList
                    filtedBrands={filtedBrands}
                    noData={noData}
                    onPressBrandSearchItem={this.props.onPressBrandSearchItem}
                /> : <SearchKeyword
                    history={history}
                    hot={hot}
                    onPressClearHistory={this.props.onPressClearHistory}
                    onPressKeyword={this.props.onPressSearchHistoryItem}
                />}
                
            </View>
        );
    }
}

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


let styles = StyleSheet.create({
    container: {
        flex: 1,
        position: 'absolute',
        top: 0,
        left: 0,
        width,
        height,
        backgroundColor: 'white',
    },
});