import React, { Component } from 'react'
import config from '../../config';
import iso from '../../../iso';

let providersConfig = config.providers;

export default class AllProviderListRow extends Component {

    onClick() {
        const { provider, onProviderClick } = this.props;

        onProviderClick( iso.provider.formatNameToConfigName( provider.Name ), provider.Id );
    }

    render() {
        const { provider } = this.props;

        let providerConfig = providersConfig[ iso.provider.formatNameToConfigName( provider.Name ) ];

        if ( !providerConfig ) {
            console.log( 'wrong provider ' + provider.Name );
        }

        let providerUrl = providerConfig.icon;

        return (<li className="cluedIn_allProvider_row">
            <div className="cluedIn_allProvider_logo">
                <img alt={provider.Name} src={providerUrl}/>
            </div>
            <h4>{provider.Name}</h4>

            <div className="cluedIn_allProviderList_details">{provider.Details}</div>
            <a onClick={this.onClick.bind(this)} className="cluedIn_btn-primary cluedIn_btn">
                Add
            </a>
        </li>);
    }
};