import React from 'react'
import styles from './styles.scss'
import BEMModule from 'utils/bem'
import PropTypes from 'prop-types'

import Tooltip from 'react-uikit/tooltip'

const bem = new BEMModule(styles)

const PrimaryMetric = ({
    average,
    helpUrl,
    isNegative,
    title,
    tooltip,
    type,
    value,
}) => {
    const rootClassNames = bem.classNames('c-card-metric-primary', {
        [type]: type,
    })
    const titleClassNames = bem.classNames('c-card-metric-primary__title')
    const helpClassNames = bem.classNames('c-card-metric-primary__help')
    const valueClassNames = bem.classNames('c-card-metric-primary__value', {
        negative: isNegative,
    })
    const averageClassNames = bem.classNames('c-card-metric-primary__average')
    const linkClassNames = bem.classNames('c-card-metric-primary__link')

    return (
        <div className={rootClassNames} title={title}>
            <div className={titleClassNames}>
                <h3>{title}</h3>
                {tooltip && (
                    <span
                        className={helpClassNames}
                        data-for={title}
                        data-tip=""
                    >
                        ?
                    </span>
                )}
                <Tooltip id={title} isDark>
                    <p>{tooltip}</p>
                </Tooltip>
            </div>
            <p className={valueClassNames}>{value}</p>
            <p className={averageClassNames}>
                Average&emsp;<span>{average}</span>
            </p>
            {helpUrl && (
                <a
                    className={linkClassNames}
                    href={helpUrl}
                    target="_blank"
                    rel="noopener noreferrer"
                >
                    Learn more
                </a>
            )}
        </div>
    )
}

PrimaryMetric.propTypes = {
    average: PropTypes.string,
    change: PropTypes.number,
    helpUrl: PropTypes.string,
    isNegative: PropTypes.bool,
    title: PropTypes.string,
    tooltip: PropTypes.string,
    type: PropTypes.oneOf(['primary', 'secondary']),
    value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
}

PrimaryMetric.defaultProps = {
    type: 'primary',
}

export default PrimaryMetric