import React from 'react'
import styles from './index.module.less'
import { Histogram } from '../../types/searchSelect'

import { Tooltip } from 'antd'

type ComponentProps = {
  histogram: Histogram
  onTempChange: (index: number) => any
  onChange: (index: number) => any
  onRecover: () => any
}

const RangeFilterHistogram: React.FC<ComponentProps> = ({
  histogram,
  /**
   * @description 鼠标悬浮的时候 临时改变range值
   */
  onTempChange,
  /**
   * @description 鼠标点击的时候 改变range值
   */
  onChange,
  /**
   * @description 鼠标移走的时候 恢复临时改变的range值
   */
  onRecover,
}) => {
  const { buckets = [] } = histogram

  if (!buckets.length) return null

  return (
    <div className={styles['analysis-range-filter-histogram']} onMouseOut={onRecover}>
      {buckets.map(({ count, percentage }, i) => (
        <Tooltip title={`${percentage}%占比`} key={count + percentage + i}>
          <div
            className="column-item"
            onMouseOver={() => onTempChange(i)}
            onClick={() => onChange(i)}
          >
            <div className="column-inside" style={{ height: `${percentage}%` }} />
          </div>
        </Tooltip>
      ))}
    </div>
  )
}

export default RangeFilterHistogram