// @flow
import type { BreakPoint } from '../../breakpoints';
import type { HideProps } from './hide.proptypes';
import { bpMedium, bpLarge, bpXLarge } from '../../breakpoints';

export const getHideDisplay = (
  hide?: ('sm' | 'md' | 'xl') | Array<BreakPoint>,
  size: BreakPoint,
) => {
  if (typeof hide === 'string') {
    return hide === size ? 'none' : undefined;
  }

  if (hide && hide[0]) {
    return hide.includes(size) ? 'none' : undefined;
  }
};

const legacyGetHideDisplayMd = ({ hide }: HideProps) =>
  hide === 'md' ? 'none' : undefined;

export const getHideDisplaySm = ({ hide }: HideProps) =>
  getHideDisplay(hide, 'sm');
export const getHideDisplayMd = ({ hide }: HideProps) =>
  getHideDisplay(hide, 'md');
export const getHideDisplayLg = ({ hide }: HideProps) =>
  getHideDisplay(hide, 'lg');
export const getHideDisplayXl = ({ hide }: HideProps) =>
  getHideDisplay(hide, 'xl');

const medium = parseInt(bpMedium, 10);
const large = parseInt(bpLarge, 10);
const xlarge = parseInt(bpXLarge, 10);

export const getHideRules = (props: HideProps) => {
  const hideSmRules = getHideDisplaySm(props);
  const hideMdRules = getHideDisplayMd(props);
  const legacyHideSmRules = legacyGetHideDisplayMd(props);
  const hideLgRules = getHideDisplayLg(props);
  const hideXlRules = getHideDisplayXl(props);

  return [
    hideSmRules
      ? `@media (min-width: 0px) and (max-width: ${
          medium - 1
        }px) { display: ${hideSmRules}; }\n`
      : '',
    hideMdRules
      ? `@media (min-width: ${medium}px) and (max-width: ${
          large - 1
        }px) { display: ${hideMdRules}; }\n`
      : '',
    legacyHideSmRules
      ? `@media (min-width: ${medium}px) { display: ${legacyHideSmRules}; }\n`
      : '',
    hideLgRules
      ? `@media (min-width: ${large}px) and (max-width: ${
          xlarge - 1
        }px) { display: ${hideLgRules}; }\n`
      : '',
    hideXlRules
      ? `@media (min-width: ${xlarge}px) { display: ${hideXlRules}; }\n`
      : '',
  ].join('');
};
