import React, { Component } from 'react';
import { observer } from 'mobx-react';
import './SearchBar.css';

import { DataStore } from '../DataStore';

@observer
class SearchBar extends Component {

    state = {
        value:''
    }

    onClickBtn = () => {
        if(this.state.value) {
            DataStore.keyword = this.state.value;
            DataStore.page = 1;
            DataStore.searchSongListStore();
        }else{
            DataStore.keyword = '';
            DataStore.page = 0;
            DataStore.newSongListStore();
        }
    }

    onTextChange = (event) => {
        this.setState({
            value: event.target.value
        });
    }

    render() {
        return (
            <div className="search-box">
                <div className="search-input">
                    <input type="text" placeholder="搜索歌曲或歌手"
                    value={this.state.value} 
                    onChange={this.onTextChange} />
                </div>
                <div className="search-btn">
                    <button className="iconfont icon-search" 
                    onClick={this.onClickBtn}></button>                
                </div>
            </div>
        );
    }
}

export default SearchBar;