import React from 'react';

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

export default class ListSortSettingsWindow extends DropDownBase
{
    state = { checksVisible: false }

    render()
    {
        let sort = this.props.override ? this.props.sorting : this.props.defaultSorting;
        return <div ref="dd" onClick={this.onClick} className={'dropdown window list-sort'+(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="title">Sorting for {this.props.folder}</div>
            <label><input type="checkbox" checked={this.props.override ? "checked" : null} /> Override default sorting</label>
            <ListSortSettings className="sorting" sort={sort} />
            <div className="show">
                <a className="button" onClick={this.expandChecks}><span className={this.state.checksVisible ? 'collapse' : 'expand'}></span> Show</a>
            </div>
            <div className="show-checks" style={{ display: this.state.checksVisible ? null : 'none' }}>
                <label><input type="checkbox" checked={this.props.show.read ? "checked" : null} /> Show Read</label>
                <label><input type="checkbox" checked={this.props.show.trash ? "checked" : null} /> Show Trash</label>
                <label><input type="checkbox" checked={this.props.show.spam ? "checked" : null} /> Show Spam</label>
                <label><input type="checkbox" checked={this.props.show.lists ? "checked" : null} /> Show Mailing Lists</label>
                <label><input type="checkbox" checked={this.props.show.sent ? "checked" : null} /> Show Sent</label>
                <label><input type="checkbox" checked={this.props.show.dups ? "checked" : null} /> Show Duplicates</label>
            </div>
        </div>
    }

    expandChecks = () =>
    {
        this.setState({ checksVisible: !this.state.checksVisible });
    }
}