import React, { memo } from 'react';

export default memo(({
  completed,
  labelAlignment,
  transitionDuration,
  transitionTimingFunction,
  className,
  dir,
  ariaValuemin,
  ariaValuemax,
  ariaValuetext
}) => {
  const fillerStyles = {
    width: Number(completed) > 100 ? `100%` : `${Number(completed)}%`,
    transition: `width ${transitionDuration || '1s'} ${
      transitionTimingFunction || 'ease-in-out'
    }`,
    display: 'flex',
    alignItems: 'center'
  };

  const completedStr = typeof completed === 'number' ? `${completed}%` : `${completed}`;

  return (
    <div
      className={className}
      dir={dir}
      role="progressbar"
      aria-valuenow={parseFloat(completedStr)}
      aria-valuemin={ariaValuemin}
      aria-valuemax={ariaValuemax}
      aria-valuetext={`${
        ariaValuetext === null ? completedStr : ariaValuetext
      }`}
    >
      <div>
        <div style={fillerStyles}>
          {labelAlignment !== 'outside' && (
            <span>{completedStr}</span>
          )}
        </div>
      </div>
      {labelAlignment === 'outside' && (
        <span>{completedStr}</span>
      )}
    </div>
  );
});
