import React from 'react';
import AttachList from './AttachList.js';
import StoreListener from './StoreListener.js';

class ComposeWindow extends React.PureComponent
{
    state = {
        text: ''
    }

    changeText = (ev) =>
    {
        this.setState({ text: ev.target.value });
    }

    render()
    {
        return (<div className="compose">
            <div className="actions">
                <a className="button"><img src="icons/mail_send.png" />Send</a>
                <a className="button"><img src="icons/delete.png" /></a>
            </div>
            <div className="flex">
                <div className="headers">
                    <div className="headers-table">
                        <div className="header">
                            <div className="field">From</div>
                            <div className="value">
                                <select>
                                    {this.props.accounts.filter(a => a.accountId).map((a, i) =>
                                        <option key={'a'+a.accountId}>{'"'+a.name+'" <'+a.email+'>'}</option>
                                    )}
                                </select>
                            </div>
                        </div>
                        <div className="header">
                            <div className="field">To</div>
                            <div className="value"><input /></div>
                        </div>
                        <div className="header">
                            <div className="field">Cc</div>
                            <div className="value"><input /></div>
                        </div>
                        <div className="header">
                            <div className="field">Bcc</div>
                            <div className="value"><input /></div>
                        </div>
                        <div className="header">
                            <div className="field">Subject</div>
                            <div className="value"><input /></div>
                        </div>
                    </div>
                    <AttachList />
                </div>
                <div className="text">
                    <textarea onChange={this.changeText} defaultValue={this.state.text}></textarea>
                </div>
            </div>
        </div>);
    }
}

export default StoreListener(ComposeWindow, (data) => { return { accounts: data.accounts }; });