import React, { Component } from 'react'
import ProviderIcons from '../entityRelated/providerIcons.jsx'
import EntityIcon from '../entityRelated/EntityIcon.jsx'
import EntityLink from '../entityRelated/EntityLink.jsx'
import EntityLogo from '../entityRelated/EntityLogo.jsx'
import SocialProperties from '../entityRelated/SocialProperties.jsx';

export default class Organization extends Component {
    render() {
        const { entity } = this.props;

        let IconHtml = (<EntityIcon entityType={entity.data.entityType}></EntityIcon>);

        if ( entity.hasPreview ) {
            IconHtml = (<EntityLogo url={entity.previewUrl}></EntityLogo>);
        } else {
            IconHtml = (<EntityIcon entityType={entity.data.entityType}></EntityIcon>);
        }

        return (
            <div className="cluedIn_entity_row">
                <div className="cluedIn_entity_row_sub">
                    <ProviderIcons providers={entity.providers}></ProviderIcons>
                    {IconHtml}
                    <EntityLink entity={entity}></EntityLink>
                </div>

                <div className="cluedIn_row cluedIn_row_notCentered cluedIn_entity_table">
                    <SocialProperties properties={entity.social}></SocialProperties>
                </div>
            </div>
        );
    }
}