import PropTypes from 'prop-types';
import React from 'react';

import { GraphBarsProps } from './interfaces';
import { GraphBars, GraphValue, GraphBar } from './styledComponents';

const GraphBarsComponent = (props: GraphBarsProps): JSX.Element => {
  const {
    nbColumn,
    value,
    color,
    height,
    valuePosition,
    unit,
    hideUnit,
    hideValue,
  } = props;

  if (hideValue) {
    return (
      <GraphBars nbColumn={nbColumn}>
        {/* Empty GraphValue to make sure bars is not gonna overlap - OPE-484 */}
        <GraphValue position={valuePosition} />
        <GraphBar color={color} height={Math.min(height, 100)} />
      </GraphBars>
    );
  }

  return (
    <GraphBars nbColumn={nbColumn}>
      <GraphValue position={valuePosition}>
        {hideUnit ? `${value}` : `${value} ${unit}`}
      </GraphValue>
      <GraphBar color={color} height={Math.min(height, 100)} />
    </GraphBars>
  );
};

GraphBarsComponent.propTypes = {
  nbColumn: PropTypes.number.isRequired,
  // eslint-disable-next-line react/forbid-prop-types
  value: PropTypes.any.isRequired,
  color: PropTypes.string.isRequired,
  height: PropTypes.number.isRequired,
  unit: PropTypes.string.isRequired,
  valuePosition: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
  hideUnit: PropTypes.bool,
  hideValue: PropTypes.bool,
};

GraphBarsComponent.defaultProps = {
  valuePosition: null,
  hideUnit: false,
  hideValue: false,
};

export default GraphBarsComponent;