import React, { Component, PropTypes } from 'react';
import {render} from 'react-dom';

import Header from './components/Header';
import WordList from './components/WordList';
import GroupMenu from './components/GroupMenu';

class Main extends Component {
    constructor(){
        super(...arguments);
        this.state = {
            filterText: '',
            toggleMenu: false
        };
    }
    handleUserInput(searchTerm){
        this.setState({filterText: searchTerm});
    }
    handleMenuToggle(flag){
        this.setState({toggleMenu: !flag});
    }
    render() {
        let groupMenu = this.state.toggleMenu ? <GroupMenu menuShow={this.handleMenuToggle.bind(this)} toggleMenu={this.state.toggleMenu} list={this.props.wordList}/> : '';

        return(

                <div className="wrapper">
                    <Header title="단어장" filterText={this.state.filterText} onUserInput={this.handleUserInput.bind(this)} menuShow={this.handleMenuToggle.bind(this)} toggleMenu={this.state.toggleMenu}/>
                    <WordList list={this.props.wordList} filterText={this.state.filterText}/>
                    {groupMenu}
                </div>
        );
    }
}

Main.PropTypes = {
    wordList: PropTypes.arrayOf(PropTypes.object)
};

export default Main;