import * as React from 'react';
import Box from '@mui/material/Box';
import Typography from '@mui/material/Typography';
import Modal from '@mui/material/Modal';
import { GoogleLogout } from 'react-google-login';
import { useDispatch, useSelector } from 'react-redux';
import { updateLoginStatus } from '../redux-elements/loginStatus';

const style = {
  position: 'absolute',
  top: '50%',
  left: '50%',
  transform: 'translate(-50%, -50%)',
  width: 400,
  bgcolor: 'background.paper',
  border: '2px solid #000',
  boxShadow: 24,
  p: 4,
};

export default function LogoutModal({open, handleClose}) {
    
    const clientId = "28960402387-lioh5qksd4js14rkahl6gkqt3v0o7t9n.apps.googleusercontent.com";
    const dispatch = useDispatch();
    const loginStatus = useSelector(state => state.loginStatus);

    const onLogoutSuccess = async () => {
        
        dispatch(updateLoginStatus({ prop: "isLoggedIn", value: false }));
        dispatch(updateLoginStatus({ prop: "loginToken", value: null }));
        async function logoutBackend() {
            const response = await fetch("http://127.0.0.1:8000/sabreapi/v1/auth/logout/", {
                method: "POST",
                headers: { "Content-Type": "application/json" },
                body: JSON.stringify({
                    token_id: loginStatus.loginToken,
                }) 
            })
            const data = await response.json();
            alert(data.success)
            handleClose();
        }
        logoutBackend()
        
        
     }

    return (
    <div>
      <Modal
        open={open}
        onClose={handleClose}
        aria-labelledby="modal-modal-title"
        aria-describedby="modal-modal-description"
      >
        <Box sx={style}>
          <Typography id="modal-modal-title" variant="h6" component="h2">
            Would you like to log out?
          </Typography>
           <GoogleLogout
                clientId={clientId}
                buttonText="Logout"
                onLogoutSuccess={onLogoutSuccess}
            />
        </Box>
      </Modal>
    </div>
  );
}