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";
import GhostChainSelect from "./GhostChainSelect";

const PREFIX = "TopBar";

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

function TopBar({
    chainId,
    chainExists,
    address,
    wrongNetworkToastId,
    connect,
    status,
    handleDrawerToggle,
    setWrongNetworkToastId
}) {
    const themeColor = useTheme();
    const desktop = useMediaQuery(themeColor.breakpoints.up(1048));
    const small = useMediaQuery(themeColor.breakpoints.down(400));
    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={small ? "calc(100vw - 78px)" : "500px"}
                    height="40px"
                >
                    <GhostChainSelect />
                    <SelectNetwork
                        wrongNetworkToastId={wrongNetworkToastId}
                        setWrongNetworkToastId={setWrongNetworkToastId}
                        chainId={chainId}
                        small={small}
                        status={status}
                    />
                    <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;
