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

const bem = new BEMModule(styles)

const CoursePortfolioGoal = ({
    completionValue,
    label,
    goal,
    tooltip,
    value,
}) => {
    const rootClassNames = bem.classNames('c-card-course-portfolio-goal')
    const labelClassNames = bem.classNames(
        'c-card-course-portfolio-goal__label'
    )
    const blankClassNames = bem.classNames(
        'c-card-course-portfolio-goal__blank'
    )
    const valueClassNames = bem.classNames(
        'c-card-course-portfolio-goal__value'
    )

    const parsedGoal = goal ? Number(goal) : 0
    const parsedValue = value ? Number(value) : 0

    if (typeof goal !== 'number') {
        return (
            <div className={rootClassNames}>
                <div className={blankClassNames}>
                    <p className={valueClassNames}>
                        <span>{value}</span>
                    </p>
                </div>
                <p className={labelClassNames}>{label}</p>
            </div>
        )
    }

    return (
        <div className={rootClassNames}>
            <ProgressBar
                completionValue={completionValue}
                label={label}
                max={parsedGoal}
                tooltip={tooltip}
                type="circular"
                value={Math.min(parsedValue, parsedGoal)}
            />
            <p className={labelClassNames}>{label}</p>
        </div>
    )
}

CoursePortfolioGoal.propTypes = {
    completionValue: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
    goal: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
    label: PropTypes.string,
    tooltip: PropTypes.bool,
    value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
}

CoursePortfolioGoal.defaultProps = {
    value: 0,
}

export default CoursePortfolioGoal