import styled, from 'styled-components';
import React from 'react';
import Media from 'react-media';

const isFunction = f => typeof f === 'function';

const IS_SERVER = typeof window === 'undefined';

export const DesktopOnly = ({ children }) => (
  <Media query="@media screen and (max-width: 990px)">
    {matches => matches && (isFunction(children) ? children() : children)}
  </Media>
);

const CSSDesktopOnly = styled.div`
  @media screen and (max-width: 990px) {
    display: none;
  }
`;

export function SmartDesktopOnly(props) {
  if (IS_SERVER) {
    const { children, ...otherProps } = props;
    return (
      <CSSDesktopOnly {...otherProps}>
        {isFunction(children) ? children() : children}
      </CSSDesktopOnly>
    );
  }

  return <DesktopOnly {...this.props} />;
}