import React from 'react';
import './navbar-logo.less';

let logoImg = 'data:image/gif;' +
    'base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==';

/**\

    title: NavbarLogo
    category: component
    description: Navbar logo used on dashboards
    props:
        title[String]: link title
        click[Function|String]: Either a function that will fire onClick or a
            string representing the href.

\**/

class NavbarLogo extends React.Component {
    componentDidMount() {
        logoImg = require('./img/logo.svg');
        this.forceUpdate();
    }

    render() {
        let title = null,
            href = '#',
            click = null;

        if (this.props.title) {
            title = this.props.title;
        }

        const img = (
            <img src={ logoImg }
                width="102"
                height="14"
                alt={ title } />
        );

        if (typeof this.props.click === 'function') {
            click = this.props.click;
        } else if (typeof this.props.click === 'string') {
            href = this.props.click;
        }

        return (
            <div className="navbar-logo">
                <a href={ href }
                    title={ title }
                    onClick={ click }>
                    { img }
                </a>
            </div>
        );
    }
}

export default NavbarLogo;
