import React from 'react';
import {connect} from 'react-redux';

import * as appAction from '../actions/app';

import './TaskBar.less';

class TaskBar extends React.Component {
    constructor() {
        super();
    }

    render() {
        let tasks = [];
        for (let id in this.props.instances) {
            let app = this.props.instances[id];
            let className = 'task clearfix';
            if (app.active) {
                className += ' active';
            }
            tasks.push((
                <div
                    className={className}
                    key={`task_${id}`}
                    onClick={this.activeApp(id)}
                >
                    <img className='task-icon' src={app.iconUrl} />
                    <span className='task-title'>{app.title}</span>
                </div>
            ));
        }

        return (
            <div className='ui-taskbar clearfix'>
                {tasks}
            </div>
        );
    }

    activeApp(appId) {
        let {dispatch} = this.props;
        return function() {
            dispatch(appAction.active(appId));
        };
    }
}

function mapStateToProps(state) {
    return state.app;
}

export default connect(mapStateToProps)(TaskBar);