import React from 'react';
import AccountFolders from './AccountFolders.js';
import DropDownButton from './DropDownButton.js';
import ProgressBar from './ProgressBar.js';

export default class FolderList extends React.PureComponent
{
    state = { selectedAccount: -1, selectedFolder: -1 }

    render()
    {
        return (<div className={"folder-list"+(this.props.progressText ? ' progress-visible' : '')}>
            <div className="top-border-gradient"></div>
            <div className="bottom-border-gradient"></div>
            <div className="actions">
                <a className="button"><img src="icons/compose.png" /> Compose</a>
                <DropDownButton dropdownId="check-send" className="check-send" icon="mail_check_send" onClick={this.onClickCheckSend} />
            </div>
            // TODO: keyboard navigation
            <div className="listview" tabIndex="1">
                {this.props.accounts.map((account, i) => <AccountFolders
                    key={'a'+account.accountId}
                    accountIndex={i}
                    onSelect={this.onSelectFolder}
                    selected={this.state.selectedAccount == i ? this.state.selectedFolder : -1}
                    account={account}
                />)}
            </div>
            <ProgressBar
                text={this.props.progressText}
                progress={this.props.progressPercent}
            />
        </div>)
    }

    onClickCheckSend = () =>
    {
        this.props.startResync();
    }

    onSelectFolder = (accIndex, folderIndex) =>
    {
        let acc = this.props.accounts[accIndex];
        let folder = this.props.accounts[accIndex].folders[folderIndex];
        if (this.state.selectedAccount != accIndex || this.state.selectedFolder != folderIndex)
        {
            if (folder.folderId)
                this.props.loadFolder({ folderId: folder.folderId });
            else
                this.props.loadFolder({ accountId: acc.accountId, folderType: folder.type });
        }
        this.setState({ selectedAccount: accIndex, selectedFolder: folderIndex });
    }
}