// @flow
import React from 'react';
import type { ComponentType } from 'react';
import styled from 'styled-components';
import { getSpacingRules } from '../../../mixins/spacing';
import { getStackedRules } from '../../../mixins/stacking';
import { getStackeeRules } from '../../../mixins/stackee';

import {
  getMinHeightValue,
  getAnimationUrl,
} from './loading-indicator.css-rules';
import type { LoadingIndicatorProps } from './loading-indicator.proptypes';

const LoadingIndicatorNotReady = styled.div`
  min-height: ${getMinHeightValue};
  width: 100%;
  background: ${getAnimationUrl} no-repeat center;
  &&& {
    ${getSpacingRules}
  }
  ${getStackeeRules};
`;

const LoadingIndicatorReady = styled.div`
  min-height: ${getMinHeightValue};
  width: 100%;
  &&& {
    ${getSpacingRules}
  }
  ${getStackedRules};
  ${getStackeeRules};
`;

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

LoadingIndicator.displayName = 'LoadingIndicator';
