import React from 'react';
import DropDownBase from './DropDownBase.js';
import ListSortSettings from './ListSortSettings.js';

export default class MailSettingsWindow extends DropDownBase
{
    render()
    {
        return <div ref="dd" onClick={this.onClick} className={'dropdown window'+(this.state.visible ? ' visible' : '')}
            id={'dropdown-'+this.props.id} tabIndex="1" style={{ top: this.state.top, left: this.state.left }}>
            <div ref="callout" className="callout-top" style={{ left: this.state.calloutLeft }}></div>
            <div className="text">Mail Layout</div>
            <div className="layouts">
                <a onClick={this.switchLayout} className={'button mail-message-on-right'+(this.props.layout == 'message-on-right' ? ' selected' : '')} title="List and Message on Right"><span></span></a>
                <a onClick={this.switchLayout} className={'button mail-message-on-bottom'+(this.props.layout == 'message-on-bottom' ? ' selected' : '')} title="List and Message Below"><span></span></a>
                <a onClick={this.switchLayout} className={'button mail-message-invisible'+(this.props.layout == 'message-invisible' ? ' selected' : '')} title="List Only"><span></span></a>
            </div>
            <div className="split"><i></i></div>
            <div className="text">Default List Sorting</div>
            <ListSortSettings className="fields" sort={this.props.defaultSorting} />
            <div className="fields">
                <label><input type="checkbox" checked={this.props.quickReply} onClick={this.props.toggleQuickReply} /> Show Quick Reply</label>
            </div>
            <div className="split"><i></i></div>
            <div className="text">Mark as Read</div>
            <div className="fields">
                <select className="sortby" defaultValue={this.props.markDelay}>
                    <option value="-1">Manually</option>
                    <option value="0">On Select</option>
                    <option value="1">After 1 second</option>
                    <option value="3">After 3 seconds</option>
                    <option value="5">After 5 seconds</option>
                </select>
            </div>
        </div>
    }

    switchLayout = (ev) =>
    {
        let t = ev.target.nodeName == 'A' ? ev.target : ev.target.parentNode;
        let l = / mail-(\S+)/.exec(t.className)[1];
        this.props.setLayout(l);
    }
}