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 { toggleLock } from '@/container/store/app-lock';

interface IProps {}
interface IState {}

const DPaper = styled(Paper)(({ theme }) => ({
  padding: theme.spacing(2),
}));

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

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

  return (
    <DPaper className="setting-page">
      <h2>~~~ Setting Page ~~~</h2>
      <Link to="/">
        <Button variant="contained" color="secondary">Home Page</Button>
      </Link>
      <p>
        <Button variant="contained" color="primary"
          onClick={() => toggleLock(true)}>Lock
        </Button>
      </p>
    </DPaper>
  );
};

export default observer(Setting);