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 { makeNoValueRow, makePropHtml, findFromKey, makeLinkHtml, makeGmapLink } from '../../helpers/properties.jsx'
import SocialProperties from '../entityRelated/SocialProperties.jsx';

var noWebsite    = makeNoValueRow( 'Website' );
var noLocation   = makeNoValueRow( 'Location' );
var noIndustry   = makeNoValueRow( 'Industry' );
var noNbEmployee = makeNoValueRow( 'Number Employee' );

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

        var websiteProp    = findFromKey( entity.properties, 'website' );
        var locationProp   = findFromKey( entity.properties, 'location' );
        var industryProp   = findFromKey( entity.properties, 'industry' );
        var nbemployeeProp = findFromKey( entity.properties, 'nbemployee' );

        let websiteHtml    = websiteProp ? makeLinkHtml( websiteProp ) : noWebsite;
        let locationHtml   = locationProp ? makeGmapLink( locationProp ) : noLocation;
        let industryHtml   = industryProp ? makePropHtml( industryProp ) : noIndustry;
        let nbemployeeHtml = nbemployeeProp ? makePropHtml( nbemployeeProp ) : noNbEmployee;

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

        if ( entity.hasLogo ) {
            IconHtml = (<EntityLogo url={entity.logoUrl}></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 className="cluedIn_col s6">
                        {websiteHtml}
                    </div>
                    <div className="cluedIn_col s6">
                        {locationHtml}
                    </div>
                    <div className="cluedIn_col s6">
                        {industryHtml}
                    </div>
                    <div className="cluedIn_col s6">
                        {nbemployeeHtml}
                    </div>
                </div>
            </div>
        );
    }
}