import React from 'react';

export default class TabPanel extends React.PureComponent
{
    state = { selected: 0, tabs: this.props.tabs }

    render()
    {
        var bar = [];
        var body = [];
        for (var i = 0; i < this.state.tabs.length; i++)
        {
            var t = this.state.tabs[i];
            bar.push(
                <div key={'t'+i} className={'tab'+(i == this.state.selected ? ' selected' : '')+(t.noclose ? ' noclose' : '')}
                    id={'t-tab'+i} onClick={this.switchTab} style={i == this.state.closing ? { width: '1px', padding: '0', opacity: '0' } : null}>
                    {t.noclose ? null : <a className="close" onClick={this.closeTab}></a>}
                    <img src={'icons/'+t.icon+'.png'} className={t.i16 ? 'i16' : null} /> {t.title}
                </div>
            );
            body.push(
                <div key={'c'+i} className={'tab-content'+(t.className ? ' '+t.className : '')}
                    id={'tab'+i} style={{ display: i == this.state.selected ? null : 'none' }}>
                    {t.children}
                </div>
            );
        }
        return <div className="tab-panel">
            <div className="tab-bar">{bar}</div>
            {body}
        </div>
    }

    componentWillReceiveProps(nextProps, nextContent)
    {
        // FIXME: Do not own tabs?
        this.setState({ selected: this.state.selected % nextProps.tabs.length, tabs: nextProps.tabs });
    }

    switchTab = (ev) =>
    {
        this.setState({ selected: ev.target.id.substr(5) });
    }

    closeTab = (ev) =>
    {
        var self = this;
        var tab = ev.target.parentNode;
        //this.setState({ closing: tab.id.substr(5) });
        tab.style.width = '1px';
        tab.style.padding = '0';
        tab.style.opacity = '0';
        setTimeout(function()
        {
            var t = self.state.tabs;
            t.splice(tab.id.substr(5), 1);
            var s = self.state.selected;
            if ('t-tab'+s == tab.id)
                s = self.state.selected-1;
            this.setState({ tabs: t, selected: s });
        }, 200);
        ev.stopPropagation();
    }
}