// var client = new ImapClient('mail.yatekii.ch', 143, {
// 		auth: {
// 				user: 'yatekii@yatekii.ch',
// 				pass: 'VERYSECRET'
// 		}
// 	}
// )
// client.onerror = function(error){console.log(error);}
// client.connect().then(() => { console.log('wrks'); });

import React from 'react';
import ReactDOM from 'react-dom';

var Mailbox = React.createClass({

		getInitialState: function () {
			return {
        name: this.props.name,
        emails: {
          length: 0,
        },
      };
		},

    getData: function () {
      // Set state (number of emails e.g.)
    },

		shouldComponentUpdate: function (nextProps, nextState) {
			return true
		},

		render: function () {
			return (
        <a className={ "mailbox " + (this.props.selected ? 'active ' : '') + "item" } onClick={ this.props.onClick }>
          <i className="inbox icon"></i>
            {this.state.name}
          <div className="ui red label">{this.state.emails.length}</div>
        </a>
			);
		}
	});

var Mail = React.createClass({

	getInitialState: function () {
		return {
			_id: this.props._id,
      content: {
				from: this.props.content.from,
	      subject: this.props.content.subject,
				body: this.props.content.body,
      },
    };
	},

  getData: function () {
    // Set state (number of emails e.g.)
  },

	shouldComponentUpdate: function (nextProps, nextState) {
		return true
	},

	render: function () {
		return (
			<div className={"item" + ( this.props.selected ? ' active' : ' card' )} onClick={ this.props.onClick }>
				<img className="ui avatar image" src="helen.jpg" />
				<div className="content">
					<div className="header">{ this.state.content.from }</div>
					{ this.state.content.subject }<br/>
					{ this.state.content.body }
				</div>
			</div>
		);
	}
});

var App = React.createClass({

  getInitialState() {
      return {
          value: null,
					selectedMailbox: null,
					selectedMail: null,
      };
  },

  componentDidMount() {
    $('.ui.sidebar')
      .sidebar('setting', 'transition', 'push')
      .sidebar('setting', 'dimPage', false)
      .sidebar('setting', 'closeable', true);

    $('button#toggleMailboxes').click(function(event){
    $('.ui.sidebar')
      .sidebar('toggle');
    });
		this.selected
  },

  componentDidUpdate() {
  },

	onMailboxClick(i){
		this.setState({selectedMailbox: i});
	},

  getMailboxes() {
    return [
      { _id: 1, name: 'Inbox' },
      { _id: 2, name: 'Sent' },
      { _id: 3, name: 'Junk' },
    ];
  },

  renderMailboxes() {
    return this.getMailboxes().map((mailbox, i) => (
      <Mailbox key={ mailbox._id } name={ mailbox.name } selected={ this.state.selectedMailbox === mailbox._id } onClick={ this.onMailboxClick.bind(this, mailbox._id) }/>
    ));
  },

	onMailClick(i){
		this.setState({selectedMail: i});
	},

	getMails() {
    return [
      { _id: 1, content: { from: 'doedelhoch42@gmail.com', subject: 'An excellent companion', body: 'This is a first test.' }},
			{ _id: 2, content: { from: 'doedelhoch42@gmail.com', subject: 'An excellent companion', body: 'This is a first test.' }},
			{ _id: 3, content: { from: 'doedelhoch42@gmail.com', subject: 'An excellent companion', body: 'This is a first test.' }},
    ];
  },

  renderMails() {
    return this.getMails().map((mail, i) => (
      <Mail key={mail._id} content={ mail.content }  selected={ this.state.selectedMail === mail._id } onClick={ this.onMailClick.bind(this, mail._id) }/>
    ));
  },

  render() {
      return (
      <div>
        <div id="sidebar_mailboxes" className="ui sidebar vertical menu">
          <div className="item header">
            Mailboxes
          </div>
          { this.renderMailboxes() }
        </div>
        <div className="pusher">
          <div className="ui divided grid" id="main-grid">
            <div className="ui four wide column" id="mail-menu">
              <div className="ui divided vertical centered list">
            		{ this.renderMails() }
	              <div className="item">
	                <button className="ui grey basic button align center" id="toggleMailboxes">Toggle Mailboxes</button>
	              </div>
            	</div>
            </div>
            <div className="ui twelve wide column">
              From: doedelhoch42@gmail.com<br />
              Subject: An excellent companion<br />
              Body: Blabla this is some content!
            </div>
          </div>
        </div>
      </div>
      );
  }
});

// $(document).ready(function() {
//   ReactDOM.render(<Container />, document.getElementById('container'));
// }, false);