import React, { FunctionComponent, useContext } from 'react';

import Backdrop from '@material-ui/core/Backdrop';
import { makeStyles, createStyles, Theme } from '@material-ui/core/styles';
import cn from 'classnames';
import { Context } from '../context';
import { LoadingOverlayProps } from './types';
import { ActivityIndicator } from '../Activity-Indicator';

const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    backdrop: {
      zIndex: theme.zIndex.drawer + 1,
      color: '#fff',
    },
  })
);

export const LoadingOverlay: FunctionComponent<LoadingOverlayProps> = ({ isVisible, minimized = false, blur = true }) => {
  const classes = useStyles();

  const { isSideBarVisible } = useContext(Context);

  const classNames = cn({
    'square-loading-overlay': true,
    [classes.backdrop]: true,
    showSidebar: isSideBarVisible,
    minimized,
    blur,
  });

  return (
    <Backdrop className={classNames} open={isVisible}>
      <ActivityIndicator color="white" size={80} />
    </Backdrop>
  );
};
