import React, {useMemo} from 'react'
import {uuid} from 'common-fe/utils'
import BEMModule from 'utils/bem'
import PropTypes from 'prop-types'
import styles from '../../styles.scss'
import Tooltip from 'react-uikit/tooltip'

const bem = new BEMModule(styles)

const colors = {
    isPassing: '#4AC0B5',
    isFailing: '#FF6B6B',
    default: '#B3B3B3',
}

const Bar = ({
    afterLabel,
    bin,
    bins,
    binsCenter,
    dimensions,
    i,
    isClamped,
    passing,
    precision = 0,
}) => {
    const id = useMemo(() => `histogram__${uuid()}`, [])

    const ratio = useMemo(() => (100 / bins) * bin.count, [bins, bin.count])

    const height = useMemo(() => (dimensions.height / 100) * ratio, [
        dimensions.height,
        ratio,
    ])

    const width = useMemo(() => (dimensions.width - (4 * bins - 1)) / 12, [
        dimensions.width,
    ])

    const average = useMemo(
        () => bin.data.reduce((a, b) => a + b, 0) / bin.data.length,
        [bin.data]
    )

    const color = useMemo(() => {
        const isPassing = typeof passing === 'number' && average > passing
        const isFailing = typeof passing === 'number' && average < passing
        const isPassingBinsCenter =
            typeof binsCenter === 'number' && average > binsCenter
        const isFailingBinsCenter =
            typeof binsCenter === 'number' && average < binsCenter

        if (isFailing || isFailingBinsCenter) {
            return colors.isFailing
        }
        if (isPassing || isPassingBinsCenter) {
            return colors.isPassing
        }

        return colors.default
    }, [bin.data])
    const clampText = isClamped ? '+' : ''
    const tooltipClassNames = bem.classNames('c-histogram__tooltip')

    return (
        <React.Fragment>
            <svg
                data-tip=""
                data-for={id}
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
            >
                <rect
                    key={i}
                    x="0"
                    y={dimensions.height - height}
                    width={width}
                    height={height}
                    fill={color}
                    rx="1"
                />
            </svg>

            <Tooltip id={id}>
                <dl className={tooltipClassNames}>
                    <dt>Count: </dt>
                    <dd>{bin.count}</dd>
                    <dt>Range: </dt>
                    <dd>
                        {bin?.start?.toFixed?.(precision)}
                        {afterLabel} – {clampText}
                        {bin.end.toFixed(precision)}
                        {afterLabel}
                    </dd>
                </dl>
            </Tooltip>
        </React.Fragment>
    )
}

Bar.propTypes = {
    afterLabel: PropTypes.string,
    bin: PropTypes.object,
    bins: PropTypes.number,
    binsCenter: PropTypes.number,
    dimensions: PropTypes.object,
    i: PropTypes.number,
    isClamped: PropTypes.bool,
    maxCount: PropTypes.number,
    passing: PropTypes.number,
    precision: PropTypes.number,
}

export default Bar