import React from 'react';

import ListWithSelection from './ListWithSelection.js';
import Util from './Util.js';

export default class AttachList extends ListWithSelection
{
    state = {
        ...this.state,
        attachments: [],
        attachScroll: 0
    }

    addAttachments = (ev) =>
    {
        let a = this.state.attachments;
        if (ev.target.files)
            for (let i = 0; i < ev.target.files.length; i++)
                a.push(ev.target.files[i]);
        this.setState({ attachments: a });
        // reset file input
        ev.target.innerHTML = ev.target.innerHTML;
    }

    scrollAttachList = (ev) =>
    {
        this.setState({ attachScroll: ev.target.scrollTop });
    }

    deleteSelected = () =>
    {
        for (let i = this.state.attachments.length-1; i >= 0; i--)
            if (this.state.selected[i])
                this.state.attachments.splice(i, 1);
        this.setState({ attachments: this.state.attachments });
    }

    getTotalItems = () =>
    {
        return this.state.attachments.length;
    }

    getPageSize = () =>
    {
        return this.refs.a0 ? Math.round(this.refs.scroll.offsetHeight / this.refs.a0.offsetHeight) : 1;
    }

    getItemOffset = (index) =>
    {
        let item = this.refs['a'+index];
        return [ item.offsetTop, item.offsetHeight ];
    }

    getScrollPaddingTop = () =>
    {
        return this.refs.title.offsetHeight;
    }

    render()
    {
        return <div className="attach">
            <div className="no-attach" style={this.state.attachments.length ? { display: 'none' } : null}>
                <input type="file" multiple="multiple" onChange={this.addAttachments} />
            </div>
            <div ref="scroll" className="attach-list" tabIndex="1" onScroll={this.scrollAttachList} onKeyDown={this.onListKeyDown}
                style={this.state.attachments.length ? null : { display: 'none' }}>
                <div ref="title" className="title" style={{ top: this.state.attachScroll }}>
                    <div className="name">Attachment <a className="button">
                        <img src="icons/attach.png" />
                        <input type="file" multiple="multiple" onChange={this.addAttachments} />
                    </a></div>
                    <div className="size">Size</div>
                </div>
                {this.state.attachments.map((a, i) =>
                    <div ref={'a'+i} title={a.name+' ('+Util.formatBytes(a.size)+')'} key={'a'+i} data-i={i}
                        className={'attachment'+(this.isSelected(i) ? ' selected' : '')} onMouseDown={this.onListItemClick}>
                        <div className="name">{a.name}</div>
                        <div className="size">{Util.formatBytes(a.size)}</div>
                    </div>
                )}
            </div>
        </div>
    }
}