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

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

import './ApplicationList.less';

class ApplicationList extends React.Component {
    constructor() {
        super();

        this.state = {
            apps: window.appData
        };
    }

    render() {
        return (
            <div
                className='ui-app-list clearfix'
                onClick={this.hide.bind(this)}
            >
                {this.state.apps.map((app, index) => {
                    return (
                        <div
                            className='app-item'
                            key={index}
                            onClick={this.openApp(app)}
                        >
                            <img src={app.iconUrl} className='app-icon'/>
                            <span className='app-name'>{app.name}</span>
                        </div>
                    );
                })}
            </div>
        );
    }

    openApp(app) {
        let {dispatch} = this.props;
        return function() {
            dispatch(appAction.create(app));
        };
    }

    hide() {
        let {dispatch} = this.props;
        dispatch(appListAction.hideAppList());
    }

}

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

export default connect(mapStateToProps)(ApplicationList);