import React, { useEffect } from 'react';
import { useNavigate, Link } from 'react-router-dom';
import { observer } from 'mobx-react';
import { Paper, Button } from '@mui/material';
import { styled } from '@mui/system';

import './scss/app-lock.scss';
import AppPortal from './app-portal';
import { toggleLock } from './store/app-lock';

interface IProps {}
interface IState {}

const DPaper = styled(Paper)(() => ({
  backgroundColor: 'rgba(0, 0, 0, 85%)',
}));

const AppLock = (props: IProps, state: IState) => {
  const navi = useNavigate();

  useEffect(() => {
    return () => {};
  }, []);

  return (
    <AppPortal>
      <DPaper className="app-lock">
        <Button variant="contained" color="primary"
          onClick={() => toggleLock(false)}>unLock
        </Button>
      </DPaper>
    </AppPortal>
  );
};

export default observer(AppLock);