import React, { useEffect } from 'react';
import { useSnackbar } from 'notistack';

import useAutoSave from '../hooks/useAutoSave';
import Icon from '../components/Icon';

const index: React.FunctionComponent = () => {
  const [isSaved, isSaving] = useAutoSave();
  const { enqueueSnackbar, closeSnackbar } = useSnackbar();

  useEffect(() => {
    if (isSaving) {
      enqueueSnackbar('File saving', {
        variant: 'info',
        action: key => (
          <Icon glyph="close" onClick={(): void => { closeSnackbar(key); }} />
        ),
      });
    }
    if (!isSaving && isSaved) {
      enqueueSnackbar('File is saved', {
        variant: 'success',
        action: key => (
          <Icon glyph="close" onClick={(): void => { closeSnackbar(key); }} />
        ),
      });
    }
  }, [isSaved, isSaving]);

  return (
    <>
    </>
  );
};

export default index;