import React, { useEffect } from "react";
import { NavLink } from "react-router";
import AppBar from '@mui/material/AppBar';
import Box from '@mui/material/Box';
import Toolbar from '@mui/material/Toolbar';
import Button from "@mui/material/Button";
import LoginIcon from "@mui/icons-material/Login";
import { Typography, Menu, MenuItem, IconButton, Avatar, Tooltip } from "@mui/material";
import useAuth from "~/hooks/useAuth";
import type { PaymentChannelInfo } from './Util';
import { approveCLRTokenSpending, openPaymentChannel, closePaymentChannel, getPaymentChannelInfo } from './Contracts/Connections';

export default function ButtonAppBar() {
  const { auth, setAuth } = useAuth();
  const account = auth?.accounts?.[0];
  const isAuthed = Boolean(account);

  const [paymentChannelInfo, setPaymentChannelInfo] = React.useState<PaymentChannelInfo | null>(null);
  const [registered, setRegistered] = React.useState<boolean>(false);
  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
  const open = Boolean(anchorEl);
  const handleOpen = (e: React.MouseEvent<HTMLElement>) => setAnchorEl(e.currentTarget);
  const handleClose = () => setAnchorEl(null);

  const handleLogout = () => {
    if (setAuth) {
      setAuth({ providerWithInfo: undefined as any, accounts: [] } as any);
    }
    handleClose();
  };

  const register = async () => {
    const clr_deposit_amount = BigInt(100) * BigInt(1e18); // 100 CLR
    await approveCLRTokenSpending(auth.providerWithInfo.provider, account!);
    await openPaymentChannel(auth.providerWithInfo.provider, account!, clr_deposit_amount);
    setRegistered(true);
  }

  const deRegister = async () => {
    await closePaymentChannel(auth.providerWithInfo.provider, account!);
    setRegistered(false);
  }

  useEffect(() => {
    getPaymentChannelInfo(auth.providerWithInfo ? auth.providerWithInfo.provider : undefined, account!).then((info) => {
      setPaymentChannelInfo(info);
      if(registered !== info.isActive) {
        setRegistered(info.isActive);
      }
      console.log("Payment Channel Info:", info);
    });
  }, [account, auth.providerWithInfo?.provider,registered]);


  return (
    <Box sx={{ flexGrow: 1 }}>
      <AppBar position="static">
        <Toolbar sx={{ width: '100%', display: 'flex', gap: 2 }}>
          {}
          <Box sx={{ display: 'flex', alignItems: 'center', gap: 3 }}>
            <Typography
              component={NavLink as any}
              to="/"
              end
              sx={{ color: 'inherit', textDecoration: 'none' }}
            >
              Home
            </Typography>

            <Typography
              component={NavLink as any}
              to="/faucet"
              sx={{ color: 'inherit', textDecoration: 'none' }}
            >
              Faucet
            </Typography>

            <Typography
              component={NavLink as any}
              to="/about"
              sx={{ color: 'inherit', textDecoration: 'none' }}
            >
              About
            </Typography>
          </Box>

          {}
          <Box sx={{ flexGrow: 1 }} />

          {}
          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
            {}
            {!isAuthed && (
              <Button
                component={NavLink as any}
                to="/wallets"
                color="inherit"
                startIcon={<LoginIcon />}
                variant="text"
                size="small"
                sx={{ color: 'inherit' }}
              >
                Login
              </Button>
            )}
            
            {isAuthed && (
              <>
                <Tooltip title={account ? `Account: ${account}` : "Account"}>
                  <IconButton
                    size="small"
                    onClick={handleOpen}
                    sx={{ ml: 1, color: 'inherit' }}
                    aria-controls={open ? 'account-menu' : undefined}
                    aria-haspopup="true"
                    aria-expanded={open ? 'true' : undefined}
                  >
                    <Avatar sx={{ width: 32, height: 32 }} src={auth.providerWithInfo.info.icon} alt={auth.providerWithInfo.info.name}>
                    </Avatar>
                  </IconButton>
                </Tooltip>

                <Menu
                  anchorEl={anchorEl}
                  id="account-menu"
                  open={open}
                  onClose={handleClose}
                  onClick={handleClose}
                  transformOrigin={{ horizontal: 'right', vertical: 'top' }}
                  anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}
                >
                  {(paymentChannelInfo && paymentChannelInfo.isActive) ? (<MenuItem onClick={deRegister}>DeRegister</MenuItem>) : (<MenuItem onClick={register}>Register</MenuItem>)} 
                  <MenuItem onClick={handleLogout}>Logout</MenuItem>
                </Menu>
              </>
            )}
          </Box>
        </Toolbar>
      </AppBar>
    </Box>
  );
}