const React = require('react');
const DropDownButton = require('./DropDownButton.js');
const Store = require('./Store.js');
const Util = require('./Util.js');

var MessageView = module.exports = React.createClass({
    formatLongDate: function(dt)
    {
        if (!(dt instanceof Date))
            dt = new Date(dt.replace(' ', 'T'));
        var h = dt.getHours();
        var m = dt.getMinutes();
        var s = dt.getSeconds();
        return Util.WeekDays[dt.getDay()]+' '+dt.getDate()+' '+Util.Months[dt.getMonth()]+' '+dt.getFullYear()+' '+(h < 10 ? '0' : '')+h+':'+(m < 10 ? '0' : '')+m+':'+(s < 10 ? '0' : '')+s
        //return dt.toLocaleString();
    },
    componentDidMount: function()
    {
        Store.on('quickReply', this.setQuickReply);
        Store.on('msg', this.setMsg);
    },
    componentWillUnmount: function()
    {
        Store.un('quickReply', this.setQuickReply);
        Store.un('msg', this.setMsg);
    },
    setQuickReply: function()
    {
        this.setState({ quickReply: Store.quickReply });
    },
    setMsg: function()
    {
        this.setState({ msg: Store.msg });
    },
    getInitialState: function()
    {
        return { quickReply: Store.quickReply };
    },
    render: function()
    {
        var msg = this.state.msg;
        return <div className={'message-view'+(!msg ? ' no-mail-shown' : '')+(!this.state.quickReply ? ' no-quick' : '')}>
            <div className="actions">
                <DropDownButton dropdownId="reply" icon="mail_reply" text="Reply" />
                <a className="button"><img src="icons/mail_reply_all.png" />Reply All</a>
                <DropDownButton dropdownId="forward" icon="mail_forward" text="Forward" />
                <DropDownButton className="action-read" icon="read" checkedIcon="read_selected" checkable="1" text="Read" checkedText="Unread" />
                <DropDownButton className="action-spam" icon="spam" checkedIcon="spam_selected" checkable="1" text="Spam" checkedText="Not Spam" />
                <DropDownButton dropdownId="delete" className="action-delete" icon="delete" checkedIcon="delete_selected" checkable="1" text="Delete" checkedText="Undelete" />
                <a className="button show-dropdown"><img src="icons/label.png" />Label <span className="down"></span></a>
                <DropDownButton ref="setBtn" dropdownId="settings" whole="1" icon="config" text="Settings" />
            </div>
            <div className="nomail">
                <div className="flex1"></div>
                <div className="middle">
                    <img src="icons/no_mail.png" />
                    <div className="txt">No message selected</div>
                </div>
                <div className="flex1"></div>
            </div>
            {msg ? [
            <div className="headers">
                <div className="top">
                    <div className="pin"></div>
                    <div className="time">{this.formatLongDate(msg.time)}</div>
                    <div className="subject">{msg.subject}</div>
                </div>
                <div className="header-table">
                    <div className="header">
                        <div className="field">From</div>
                        <div className="value"><a className="button">{msg.from+' <'+msg.fromEmail+'>'}</a></div>
                    </div>
                    <div className="header">
                        <div className="field">To</div>
                        <div className="value"><a className="button">{msg.to}</a></div>
                    </div>
                    {msg.cc ?
                    <div className="header">
                        <div className="field">Cc</div>
                        <div className="value">
                            {msg.cc.map(cc => <a className="button">{cc}</a>)}
                        </div>
                    </div>
                    : null}
                    {msg.replyto ?
                    <div className="header">
                        <div className="field">Reply-to</div>
                        <div className="value"><a className="button">{msg.replyto}</a></div>
                    </div>
                    : null}
                </div>
            </div>,
            (msg.blockedImages ?
            <div className="blocked-images">
                <img src="icons/block.png" /> This message contains blocked images.
                <a className="button raised">Load Images</a>
                <label><input type="checkbox" /> Always load from {msg.from}</label>
            </div>
            : null),
            <div className="text" dangerouslySetInnerHTML={{ __html: msg.body }}></div>,
            this.state.quickReply ?
            <div className="quick-reply">
                <textarea></textarea>
                <div className="btns">
                    <a className="button"><img src="icons/mail_send.png" /> Quick Reply</a>
                    <a className="button"><img src="icons/mail_reply_all.png" /> Quick Reply All</a>
                </div>
            </div>
            : null
            ] : null}
        </div>
    }
});