// @flow
import styled from 'styled-components';
import type { ProgressBarProps } from './progress-bar.proptypes';
import { progressBarPropTypes } from './progress-bar.proptypes';
import type { PatchworkComponent } from '../../../types';
import {
  getBackgroundColor,
  getBarColor,
  getBarWidth,
} from './progress-bar.css-rules';

const easeInOutCubic = 'cubic-bezier(0.645, 0.045, 0.355, 1)';

const HEIGHT = '5px';
const BORDER_RADIUS = '16px';

export const ProgressBar: PatchworkComponent<ProgressBarProps> = styled.div.attrs(
  ({ currentStep, totalSteps }) => ({
    role: 'progressbar',
    'aria-valuenow': currentStep,
    'aria-valuemin': 0,
    'aria-valuemax': totalSteps,
  }),
)`
  background: ${getBackgroundColor};
  border-radius: ${BORDER_RADIUS};
  height: ${HEIGHT};

  &:before {
    background: ${getBarColor};
    border-radius: ${BORDER_RADIUS};
    content: ' ';
    display: block;
    height: ${HEIGHT};
    width: ${getBarWidth};
    transition: 0.2s all ${easeInOutCubic};
  }
`;

ProgressBar.displayName = 'ProgressBar';
ProgressBar.propTypes = progressBarPropTypes;
