// @flow
import React from 'react';
import type { ComponentType } from 'react';
import styled from 'styled-components';
import { getSpacingRules } from '../../../mixins/spacing';
import {
  getMinHeightValue,
  getAnimationUrl,
} from './loading-indicator.css-rules';
import type { LoadingIndicatorProps } from './loading-indicator.proptypes';
import { loadingIndicatorPropTypes } from './loading-indicator.proptypes';

const LoadingIndicatorNotReady = styled.div.attrs(props => ({
  style: getSpacingRules(props),
}))`
  min-height: ${getMinHeightValue};
  width: 100%;
  background: ${getAnimationUrl} no-repeat center;
`;

const LoadingIndicatorReady = styled.div.attrs(props => ({
  style: getSpacingRules(props),
}))`
  min-height: ${getMinHeightValue};
  width: 100%;
`;

export const LoadingIndicator: ComponentType<LoadingIndicatorProps> = ({
  ready,
  children,
  ...props
}: LoadingIndicatorProps) =>
  ready ? (
    <LoadingIndicatorReady {...props}>{children}</LoadingIndicatorReady>
  ) : (
    <LoadingIndicatorNotReady {...props} />
  );

LoadingIndicator.displayName = 'LoadingIndicator';
LoadingIndicator.propTypes = loadingIndicatorPropTypes;
