import React from 'react';
import PropTypes from 'prop-types';
import { createNamespace } from '../../tools/namingTools';
import Image from '../image/Image';
import { getCssPropertyURL } from '../../tools/cssPropertiesHelpers';

import './styles/Logo.scss';

const n = createNamespace('Logo');

const Logo = ({
    alt,
    selectedLogo,
    defaultLogo,
    url,
    width
}) => {
    if (selectedLogo === 'noLogo') {
        return null;
    }
    const logoSrc = getCssPropertyURL(selectedLogo) || defaultLogo;
    const renderLogo = (
        <Image
            className={n('image', selectedLogo).props.className}
            alt={alt}
            src={logoSrc}
        />
    );

    return (
        <div {...n('logo').withTestId().props}>
            {url ? (
                <a {...n('link').withTestId().props} style={{ height: `${width}px` }} href={url}>{renderLogo}</a>
            ) : renderLogo}
        </div>
    );
};

Logo.propTypes = {
    alt: PropTypes.string,
    selectedLogo: PropTypes.string,
    defaultLogo: PropTypes.string,
    url: PropTypes.string,
    width: PropTypes.number
};

Logo.defaultProps = {
    alt: '',
    selectedLogo: null,
    defaultLogo: '',
    url: null,
    width: 50
};

export default Logo;
