import { Box, Button, SvgIcon, useMediaQuery, useTheme } from "@mui/material";
import MenuIcon from "../../assets/icons/hamburger.svg?react";
import Wallet from "./Wallet"
import SelectNetwork from "./SelectNetwork";


const PREFIX = "TopBar";

const classes = {
    appBar: `${PREFIX}-appBar`,
    menuButton: `${PREFIX}-menuButton`,
    pageTitle: `${PREFIX}-pageTitle`,
};

function TopBar({
    chainId,
    chainExists,
    address,
    wrongNetworkToastId,
    connect,
    handleDrawerToggle,
    setWrongNetworkToastId
}) {
    const themeColor = useTheme();
    const desktop = useMediaQuery(themeColor.breakpoints.up(1048));
    return (
        <Box
            display="flex"
            flexDirection="row"
            justifyContent="flex-end"
            paddingTop="21px"
            marginRight={desktop ? "33px" : "0px"}
            >
            <Box display="flex" alignItems="center">
                <Box display="flex" justifyContent="space-between" alignItems="center" width="320px">
                    <SelectNetwork
                        wrongNetworkToastId={wrongNetworkToastId}
                        setWrongNetworkToastId={setWrongNetworkToastId}
                        chainId={chainId}
                    />
                    <Wallet address={address} connect={connect} chainId={chainId} />
                </Box>
                {!desktop && (
                    <Button
                        id="hamburger"
                        aria-label="open drawer"
                        size="large"
                        variant="text"
                        color="secondary"
                        onClick={handleDrawerToggle}
                        className={classes.menuButton}
                    >
                        <SvgIcon component={MenuIcon} />
                    </Button>
                )}
            </Box>
        </Box>
    );
}

export default TopBar;