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

export default class AccountFolders extends React.PureComponent
{
    state = {
        collapsed: this.props.collapsed,
        animating: false,
        h: null,
        cfgPressed: false,
    }

    render()
    {
        return <div className="account">
            <div className={"account-header"+(this.state.collapsed ? ' collapsed' : '')} onClick={this.onClick}>
                {this.props.account.email || this.props.account.name}
                <div key="n" className="msg-count">{this.props.account.unreadCount}</div>
                {this.props.account.accountId ? [
                    <div key="load" className="loading icon" style={{display: this.props.account.loading ? '' : 'none'}}></div>,
                    <div key="warn" className="warning icon" style={{display: this.props.account.warning ? '' : 'none'}}></div>,
                    <div key="cfg" className={'cfg'+(this.state.cfgPressed ? ' pressed' : '')} onClick={this.showCfg}></div>
                ] : null}
            </div>
            <div className={"account-folders"+(this.state.collapsed ? ' collapsed' : '')} style={{ height: this.state.h }}>
                <div ref="vis" className={'visible-part'+(this.state.animating ? ' animating' : '')}>
                {this.props.account.folders.map((f, i) =>
                    <div key={'f'+i} data-i={i} className={'folder'+(f.type != 'pinned' && f.unreadCount > 0 ? ' with-unread' : '')+
                        (this.props.selected == i ? ' selected' : '')} onClick={this.selectFolder}>
                        {f.icon ? <img src={'icons/'+f.icon+'.png'} /> : null}
                        {' '}
                        <span>{f.name}</span>
                        {f.unreadCount > 0 ? <div className="msg-count">{f.unreadCount}</div> : null}
                    </div>
                )}
                </div>
            </div>
        </div>
    }

    selectFolder = (ev) =>
    {
        let t = ev.target;
        while (t && !t.getAttribute('data-i') && t != this.refs.vis)
            t = t.parentNode;
        if (t && t != this.refs.vis)
        {
            let i = t.getAttribute('data-i');
            this.props.onSelect(this.props.accountIndex, i);
        }
        // FIXME: send select event + switch focus to message list if folder changed
    }

    showCfg = (ev) =>
    {
        let i = DropDownBase.instances.account.state.items;
        i[0].text = 'Read '+(this.props.account.email||this.props.account.name);
        DropDownBase.instances.account.setState({ items: i });
        DropDownBase.instances.account.showAt(ev.target, () =>
        {
            this.setState({ cfgPressed: false });
        });
        this.setState({ cfgPressed: true });
        ev.stopPropagation();
    }

    onClick = () =>
    {
        if (this.state.animating)
            return;
        this.setState({ animating: true, h: this.refs.vis.offsetHeight });
        if (!this.state.collapsed)
        {
            setTimeout(() =>
            {
                this.setState({ h: 0 });
            }, 50);
        }
        setTimeout(() =>
        {
            this.setState({ collapsed: !this.state.collapsed, animating: false, h: null });
        }, this.state.collapsed ? 200 : 250);
    }
}