import React from 'react';
import { IPropsScreenMedia } from './ScreenMedia.interfaces';
import Style from './ScreenMedia.style';

export const ScreenMedia: React.FunctionComponent<IPropsScreenMedia> = ({
   showIn,
   maxWidth,
   maxHeight,
   minWidth,
   minHeight,
   children,
}: IPropsScreenMedia) => {
   let medias = [];

   if (maxWidth) medias.push(`(max-width: ${maxWidth}px)`);
   if (minWidth) medias.push(`(min-width: ${minWidth}px)`);
   if (maxHeight) medias.push(`(max-height: ${maxHeight}px)`);
   if (minHeight) medias.push(`(min-height: ${minHeight}px)`);

   switch (showIn) {
      case 'mobile':
         medias = [`(min-width: 1000px)`];
         break;
      case 'desktop':
         medias = [`(max-width: 1000px)`];
         break;
   }

   const hideIn = `@media ${medias.join(' and ')}`;

   return (
      <Style hideIn={hideIn}>
         <span className="size-screen">{children}</span>
      </Style>
   );
};
