import React, {useMemo} from 'react'
import BEMModule from 'utils/bem'
import PropTypes from 'prop-types'
import requestStatuses from 'common-fe/constants/request-statuses'
import {average as calcAverage} from 'common-fe/utils/math'
import styles from './styles.scss'

import Skeleton from 'react-loading-skeleton'
import {Flex} from 'react-uikit/layout'
import Histogram from 'components/histogram'

const bem = new BEMModule(styles)

const CourseMetric = ({
    afterLabel = '',
    binsCenter,
    helpUrl,
    histogram,
    isClamped,
    legend,
    max,
    maxValue,
    minValue,
    passing,
    precision = 0,
    shouldShowNull,
    shouldShowPassingGrade = true,
    status,
    title,
}) => {
    // Average
    const average = useMemo(() => calcAverage(histogram), [histogram])
    const nullCount = useMemo(
        () =>
            histogram.reduce((total, value) => {
                return total + (value === null ? 1 : 0)
            }, 0),
        [histogram]
    )
    const isPassing = average > passing

    const rootClassNames = bem.classNames('c-card-course-metric')
    const titleClassNames = bem.classNames('c-card-course-metric__title')
    const averageClassNames = bem.classNames('c-card-course-metric__average')
    const averageValueClassNames = bem.classNames(
        'c-card-course-metric__average-value'
    )
    const averageValueFlagClassNames = bem.classNames(
        'c-card-course-metric__average-value',
        {isPassing: passing && isPassing},
        {isFailing: passing && !isPassing}
    )
    const helpClassNames = bem.classNames('c-card-course-metric__help')
    const histogramClassNames = bem.classNames(
        'c-card-course-metric__histogram'
    )
    const legendClassNames = bem.classNames('c-card-course-metric__legend')

    return (
        <div className={rootClassNames}>
            {status === requestStatuses.PENDING ? (
                <React.Fragment>
                    <Skeleton height="4rem" />

                    <Flex justify="space-between" style={{marginTop: '2rem'}}>
                        <Skeleton width="1rem" height="10rem" />
                        <Skeleton width="1rem" height="10rem" />
                        <Skeleton width="1rem" height="10rem" />
                        <Skeleton width="1rem" height="10rem" />
                        <Skeleton width="1rem" height="10rem" />
                        <Skeleton width="1rem" height="10rem" />
                        <Skeleton width="1rem" height="10rem" />
                        <Skeleton width="1rem" height="10rem" />
                        <Skeleton width="1rem" height="10rem" />
                        <Skeleton width="1rem" height="10rem" />
                        <Skeleton width="1rem" height="10rem" />
                        <Skeleton width="1rem" height="10rem" />
                    </Flex>
                </React.Fragment>
            ) : (
                <React.Fragment>
                    <div className={titleClassNames}>
                        <h3>{title}</h3>
                        {helpUrl && (
                            <a
                                href={helpUrl}
                                target="_blank"
                                rel="noopener noreferrer"
                                className={helpClassNames}
                            >
                                ?
                            </a>
                        )}
                    </div>

                    <div className={averageClassNames}>
                        <h4>average</h4>
                        <p className={averageValueClassNames}>
                            <span className={averageValueFlagClassNames}>
                                {Number(average).toFixed(precision)}
                                {afterLabel}
                            </span>
                            {shouldShowPassingGrade &&
                                (max || passing) &&
                                ` / ${max ? max : passing}${afterLabel}`}
                        </p>
                    </div>

                    <Histogram
                        afterLabel={afterLabel}
                        binsCenter={binsCenter}
                        className={histogramClassNames}
                        histogram={histogram}
                        isClamped={isClamped}
                        maxValue={maxValue}
                        minValue={minValue}
                        passing={passing}
                        precision={precision}
                    />

                    {legend && <div className={legendClassNames}>{legend}</div>}

                    {shouldShowNull && nullCount > 0 && (
                        <div className={legendClassNames}>
                            Null values: {nullCount}
                        </div>
                    )}
                </React.Fragment>
            )}
        </div>
    )
}

CourseMetric.propTypes = {
    afterLabel: PropTypes.string,
    binsCenter: PropTypes.number,
    helpUrl: PropTypes.string,
    histogram: PropTypes.arrayOf(PropTypes.number),
    isClamped: PropTypes.bool,
    legend: PropTypes.string,
    max: PropTypes.number,
    maxValue: PropTypes.number,
    minValue: PropTypes.number,
    passing: PropTypes.number,
    precision: PropTypes.number,
    shouldShowNull: PropTypes.bool,
    shouldShowPassingGrade: PropTypes.bool,
    status: PropTypes.string,
    title: PropTypes.string,
}

CourseMetric.defaultProps = {
    value: 0,
}

export default CourseMetric