/** @jsx jsx */
import { css, jsx, keyframes } from '@emotion/core';

// @ts-ignore
import COLORS from '../../constants/colors';

const widthAnimation = (progress: any) => keyframes`
  0% {
    width: 0;
  }

  100% {
    width: ${Number(progress) * 100}%;
  }
`;

const COLOR_TYPES = {
  GREEN_NORMAL: css`
    background: ${COLORS.GREEN.NORMAL};
  `,
  GREEN_DARKER: css`
    background: ${COLORS.GREEN.DARKER};
  `
};

const BACKGROUND_TYPES = {
  GREY_NORMAL: css`
    background: ${COLORS.GREY.NORMAL};
  `,
  WHITE: css`
    background: ${COLORS.WHITE.NORMAL};
  `
};

const ProgressBarAtom = ({
  backgroundColor = '',
  progressColor = '',
  className,
  progress = 0,
  height = 6,
  ...props
}: any) => (
  <div
    {...props}
    className={`${className} relative br3 w-100 overflow-hidden`}
    css={[
      BACKGROUND_TYPES[backgroundColor]
        ? BACKGROUND_TYPES[backgroundColor]
        : css`
            background: transparent;
          `,
      css`
        height: ${height}px;
      `,
      props.css
    ]}
  >
    <div
      {...props}
      className="br3 top-0 left-0"
      css={[
        COLOR_TYPES[progressColor],
        css`
          width: ${Number(progress) * 100}%;
          height: ${height}px;
          animation: ${widthAnimation(progress)} 1s ease-in;
        `
      ]}
    />
  </div>
);

export { ProgressBarAtom };