// @flow
import styled from 'styled-components';
import type { PatchworkComponent, ThemeProps } from '../../../types';
import { getPaletteColor } from '../../../mixins/branding';
import { getStackedRules, getStackedDisplay } from '../../../mixins/stacking';
import type { EmptyCardProps } from './placeholder-card.proptypes';
import {
  getCardSpacingRules,
  getCardBorderRadius,
} from './placeholdercard.css-rules';
import { bpLarge, bpMedium } from '../../../breakpoints';

/**
 * PlaceholderCard is the transparent background with outline.
 * Supports all props Box does.
 * Also supports custom heights on a per-breakpoint basis.
 */

const style = ({
  theme,
  spacing,
  stacked,
  justify,
  align,
}: ThemeProps & EmptyCardProps) => ({
  ...getCardSpacingRules({ theme, spacing }),
  ...getStackedRules({ stacked, justify, align }),
});

export const PlaceholderCard: PatchworkComponent<EmptyCardProps> = styled.div.attrs(
  props => ({ style: style(props) }),
)`
  display: ${getStackedDisplay};
  background: transparent;
  border: 1px solid ${getPaletteColor('greyscale-medium')};
  border-radius: ${getCardBorderRadius};
  min-height: ${({ minHeight }) => minHeight};
  text-align: center;

  @media (min-width: ${bpMedium}) {
    min-height: ${({ minHeightMd }) => minHeightMd};
  }

  @media (min-width: ${bpLarge}) {
    min-height: ${({ minHeightLg }) => minHeightLg};
  }
`;

PlaceholderCard.displayName = 'PlaceholderCard';
