import React, { Component } from 'react'
import Widget from '../../../core/components/generics/widget.jsx'
import Overlay from '../../../core/components/generics/overlay.jsx'
import registry from '../../../core/registry'
import config from '../../../core/config'
import { connect } from 'react-redux'
import { shouldFetchEntityIfNeeded } from '../../../core/action/entity'
import iso from '../../../iso'
import ProviderIcons from '../../../core/components/entityRelated/providerIcons.jsx'
import EntityIcon from '../../../core/components/entityRelated/EntityIcon.jsx'
import EntitySubject from '../../../core/components/entityRelated/EntitySubject.jsx'
const collectionHelper = iso.collection;

class EntityRelated extends Component {

    componentWillMount() {
        //this.props.dispatch( shouldFetchEntityIfNeeded( 'xxx-x-x-xx-' ) );
    }

    render() {
        let content;
        let minHeight = 'auto';

        const { isFetchingEntity, entity } = this.props;

        var loading = false;

        var relatedInformation = [
            { entityType: '/Task', value: 2 }, { entityType: '/Person', value: 32 }, {
                entityType: '/Document',
                value: 32
            }, { entityType: '/Sales/Deal', value: 32 }, { entityType: '/Issue', value: 32 }
        ];

        return (
            <Widget loading={loading} title="Related Information" minHeight={minHeight}>
                <div className="cluedIn_entity_list_flex">
                    <ul>
                        {relatedInformation.map( ( info, index )=> {
                            return (
                                <li key={index}>
                                    <EntityIcon entityType={info.entityType}></EntityIcon>
                                    <span className="cluedIn_name">
                                        <a>
                                            <EntitySubject entityType={info.entityType}></EntitySubject>
                                            <span className="cluedIn_badge">
                                                {info.value}
                                            </span>
                                        </a>
                                    </span>
                                </li>);
                        } )}
                    </ul>
                </div>
            </Widget>
        );

    }
}

function select( state ) {
    return {
        entity: state.entity.selectedEntity,
        isFetchingEntity: state.entity.isFetchingEntity
    };
}

registry.register( 'EntityRelated', connect( select )( EntityRelated ) );