import React,{Component} from 'react';
import ReactDOM from 'react-dom';
import ListItem from './ListItem';

class Mailbox extends React.Component {
    constructor(props) {
    super(props);
    this.state = {Paspaustas: false, pirmas: false};
    this.handlePirmasClick = this.handlePirmasClick.bind(this);
    this.handleOpenClick = this.handleOpenClick.bind(this);
    }

handleOpenClick(){
    this.setState(oldState=>({Paspaustas: !oldState.Paspaustas, pirmas: oldState.pirmas}))
}

handlePirmasClick(){
    this.setState(oldState=>({Paspaustas: oldState.Paspaustas, pirmas: !oldState.pirmas}))
}

render(){
    const unreadMessages = this.props.unreadMessages;
    const pirmassarasas = this.props.pirmassarasas;
    const {Paspaustas} = this.state;
    const {pirmas} = this.state;
    return (
    <div>
            <div>
            <h2 onClick = {this.handlePirmasClick}>Paulius Sestokas</h2>
            </div>
            {pirmas &&
            (
                <div>
                    {pirmassarasas.map((sarasas,i) =><ListItem key={i} value={sarasas} />)}
                </div>
            )
        }

      <div>

        {unreadMessages.length > 0 &&
          <h2 onClick = {this.handleOpenClick}>
            Draugu sarasas
          </h2>
        }
      </div>

        {Paspaustas &&
            (
                <div>
                    <ol>
                    {unreadMessages.map((message,i) =><ListItem key={i} value={message} />)}
                    </ol>
                </div>
            )
        }
    </div>
    )
  }
}


  const messages = ['Jonas', 'Petras', 'Gvazdykas', 'Rimas', 'Juozas'];
  const sarasas = ['Lorem ipsum - tai fiktyvus tekstas naudojamas spaudos '];
  ReactDOM.render(
    <Mailbox unreadMessages={messages} pirmassarasas={sarasas} />,
    document.getElementById('app')
  );