import React , { Component } from 'react';
import { database } from '../firebase';



const byPropKey = (propertyName, value) => () => ({
    [propertyName]: value,
});

class Search extends Component{
    constructor(props) {
        super(props);
        this.state={
            users: null,
            searchCondition: "",
            friend: ""
        }
        this.setState = this.setState.bind(this);
    }
    onSubmit = (event) => {
        event.preventDefault();
        let {
            searchCondition,
            
        } = this.state;
        database.searchConditions(searchCondition).then(snapshot => 
            this.setState(() => ({ users: snapshot.val() }))
        );
        
        
    }
    messageSubmit = (event) => {
        event.preventDefault();
        console.log("Click");
    }
    setMessage = (event) => {
        event.preventDefault();
        console.log("test");
    }
    
    render(){
        let {
            users,
            searchCondition,
            setMessage,
            messageSubmit,
            message,

        } = this.state;
        return(
            <div>
                <h1>Search for conditions</h1>
                <form onSubmit={this.onSubmit}>
                    <div className="search">
                        <input
                        value={searchCondition}
                        onChange={event => this.setState(byPropKey('searchCondition', event.target.value))}
                        type="text"
                        placeholder="Condition to Search For"
                        />
                        <button className="friendButton"
                        onClick="x"
                        type="submit">
                            Search
                        </button>
                    </div>
                    </form>
                    
                    {!!users && <UserList users={users} />}
            </div>
                )
            }
        }
        let UserList = ({ users, message, messageSubmit, setMessage }) =>
                    <div>
                            <h2>List of Usernames and Conditions of your Search</h2>
                            {Object.keys(users).map(key =>
                                <div key={key}>{users[key].username} : {users[key].condition}
                        <form messageSubmit={this.messageSubmit}>
                            <div className="search">
                                <input
                                    value={message} 
                                    onChange={event => setMessage(event.target.value)}
                                    type="text"
                                    placeholder="Message for this User"
                                />
                                <button className="messageButton"
                                    onClick={messageSubmit}
                                    type="submit">
                                    Message
                        </button>
                            </div>
                        </form>
                    </div>
                            )}
                    </div>

            




export default Search;