import React from 'react';
import {
  useScreenSize,
  breakpointKeys,
  Breakpoints,
} from '@digigov/ui/utils/hooks/useScreen';

export interface ScreenProps {
  size:
    | 'xs'
    | 'sm'
    | 'md'
    | 'lg'
    | 'xl'
    | 'xsUp'
    | 'smUp'
    | 'mdUp'
    | 'lgUp'
    | 'xlUp'
    | 'xsDown'
    | 'smDown'
    | 'mdDown'
    | 'lgDown'
    | 'xlDown';
  children?: React.ReactNode;
}

export const Screen: React.FC<ScreenProps> = ({ size, children }) => {
  const { screenSize } = useScreenSize();
  if (size?.endsWith('Up')) {
    const breakpoint = size.replace('Up', '') as Breakpoints;
    if (
      breakpointKeys.indexOf(breakpoint) <= breakpointKeys.indexOf(screenSize)
    ) {
      return <>{children}</>;
    } else {
      return null;
    }
  } else if (size.endsWith('Down')) {
    const breakpoint = size.replace('Down', '') as Breakpoints;
    if (
      breakpointKeys.indexOf(breakpoint) > breakpointKeys.indexOf(screenSize)
    ) {
      return <>{children}</>;
    } else {
      return null;
    }
  } else if (size && size !== screenSize) {
    return null;
  }
  return <>{children}</>;
};

export default Screen;