import React, { Component } from 'react'
import firebase, { provider, reference, signIn, signOut } from '../firebase';
import moment from 'moment';
import Input from './Input';
import MessageContainer from './MessageContainer';
import Search from './Search';
import Users from './Users';


export default class Application extends Component {
  constructor() {
    super();
    this.state = {
      messages: [],
      filteredMessages: null,
      filteredUsers: null,
      filteredInput: null,
      user: null,
      allUsers: null,
      sortMsg: true,
      userSelected: null,
    }
  }

  componentDidMount() {
    firebase.database().ref('messages').on('value', (snapshot) => {
      const itemsFromFirebase = this.createArrayFromFB(snapshot.val());
      this.setState({
        messages: itemsFromFirebase ? itemsFromFirebase : []})
      this.checkUser();
    });
  }

  checkUser() {
    let array = this.state.messages.map( (message) => {
      let user = [message.user].join(' ')
      return user
    })
    let uniqueName = array.filter((elem, index, self)=> {
    return index == self.indexOf(elem);
    })
    this.setState({allUsers: uniqueName});
  }

  createArrayFromFB(object) {
    const firebaseKeys = object ? Object.keys(object) : [];
    return firebaseKeys.map((key) => {
      const singleMessage = object[key];
      singleMessage['firebaseId'] = key;
      return singleMessage;
    });
  }

  storeMessage(message) {
    firebase.database().ref('messages').push(Object.assign(message, {
      time: moment(Date.now()).format('MMMM Do YYYY, h:mm a'),
      user: this.state.user.displayName,
      email: this.state.user.email
    }));

    this.state.messages.push(Object.assign(message, {
      time: moment(Date.now()).format('MMMM Do YYYY, h:mm a'),
      user: this.state.user.displayName,
      email: this.state.user.email
    }))

    this.checkUser();
  }

  sort() {
    this.state.filteredMessages ? this.state.filteredMessages.reverse() : this.state.messages.reverse();
    this.setState({ sortMsg: !this.state.sortMsg })
  }

  filter(input) {
    const filterArray = this.state.messages.filter((obj) => {
      if(obj.message.includes(input)) {
        return obj
      }
    })
    this.setState({ filteredInput: input ? filterArray : null }, () => {
      this.setState({ filteredMessages: this.state.filteredUsers ? combineArrays(this.state.filteredInput, this.state.filteredUsers ) : this.state.filteredInput })
    })
    if (input === '' && this.state.userSelected) {
      this.setState({ filteredMessages: this.state.filteredUsers })
    } else {
      this.setState({ filteredMessages: null })
    }
  }

  filterByUser(e) {
    let userClicked = e.currentTarget.innerHTML;
    const filterArray = this.state.messages.filter((obj) => {
      if(obj.user === userClicked) {
        return obj
      }
    })
    this.setState({ filteredUsers: filterArray  }, () => {
      this.setState({ filteredMessages: this.state.filteredInput ? combineArrays(this.state.filteredUsers, this.state.filteredInput ) : this.state.filteredUsers })
    })
    this.setState({ userSelected: userClicked })
  }

  render() {
    return (
      <div className="application">

        <header>
          <Search messages={this.state.messages}
                  handleChange={this.filter.bind(this)}
                  handleClick={this.sort.bind(this)}
                  text={this.state.sortMsg ? 'Sort ⬇' : 'Sort ⬆'} />
                />
        </header>

        <div className="messageSection">
          <MessageContainer messages = { this.state.filteredMessages ? this.state.filteredMessages : this.state.messages}/>
        </div>

        <aside>
          <Users users={this.state.allUsers}
                 handleClick={this.filterByUser.bind(this)}
                 resetMessages={() => {
                   this.setState({ filteredMessages: null })}}/>
        </aside>

        <div> {
          this.state.user
          ?
          <div>
            <div className='currentUser'>
              <p className='log-in-message'>Logged in as {this.state.user.displayName}  ({this.state.user.email})</p>
              <Login className='signOut' text="Sign Out" authorize={signOut} setUser={() => {
                this.setState({ user: null })
              }} />
            </div>
                <Input sendMessage={this.storeMessage.bind(this)}/>
          </div>
          :
          <div>
            <Login className='signIn' text="Sign In" authorize={signIn} setUser={ (userFromFirebase) => {
              this.setState({ user: userFromFirebase.user})}}/>
          </div>
        }
        </div>
      </div>
    )
  }
}

const Login = ({ authorize, setUser, text, className }) => {
  return (
    <div className={className + 'Banner'}>
      <button
        className={className + 'Button'}
        onClick={()=> {
          authorize().then((fromFirebase) => setUser(fromFirebase));
        }}>{text}</button>
    </div>
  )
}

const combineArrays = (array1, array2) => {
  if(array1 && array2) {
    let newArray = array1.filter((val)=> {
      return array2.indexOf(val) != -1;
    })
    return newArray
  } 
}

@@ -1864,17 +1864,16 @@
     %7D))%0A
-%0A
     this
@@ -1886,16 +1886,159 @@
 User();%0A
+    this.showAllMessages();%0A  %7D%0A%0A  showAllMessages() %7B%0A    this.setState(%7B filteredInput: null, filteredUsers: null, filteredMessages: null %7D)%0A
   %7D%0A%0A  s
@@ -3965,77 +3965,39 @@
 es=%7B
-() =%3E %7B%0A                   this.setState(%7B filteredMessages: null %7D)%7D
+this.showAllMessages.bind(this)
 %7D/%3E%0A
@@ -5130,33 +5130,8 @@
 %3E %7B%0A
-  if(array1 && array2) %7B%0A
     
@@ -5240,11 +5240,6 @@
 ray%0A
-  %7D %0A
 %7D%0A

Add function to show all messages