import { useState } from "react";
import { Box, Link, Typography, SvgIcon, Button, useTheme } from "@mui/material";
import { styled } from "@mui/material/styles";

import GhostStyledIcon from "../../components/Icon/GhostIcon";
import Paper from "../../components/Paper/Paper";

import GhostIcon from "../../assets/icons/ghost-nav-header.svg?react";
import EthIcon from "../../assets/tokens/ETH.svg?react";

import { useSwitchChain } from 'wagmi';
import toast from "react-hot-toast";

export default function NotFound({
    chainId,
    chainExists,
    wrongNetworkToastId,
    setWrongNetworkToastId
}) {
    const theme = useTheme();
    const { chains, switchChain } = useSwitchChain();

    const [networkId, setNetworkId] = useState(chainId);

    const handleChange = (newChainId) => {
        const chainName = chains.find((chain) => chain.id === newChainId).name;
        toast.dismiss(wrongNetworkToastId);
        const toastId = toast.loading(`Trying to connect to ${chainName} network... Wait please`, {
            position: 'bottom-right'
        });
        setWrongNetworkToastId(toastId);


        setNetworkId(newChainId);
        switchChain({ chainId: newChainId });
    }

    return (
        <Box
            height="calc(100vh - 45px)"
            width="100%"
            display="flex"
            flexDirection="column"
            justifyContent="center"
            alignItems="center"
        >

            {chainExists ?
                <>
                    <Link href="https://ghostchain.io" target="_blank" rel="noopener noreferrer">
                        <GhostStyledIcon
                            color="primary"
                            viewBox="0 0 385 372"
                            component={GhostIcon}
                            style={{ minWidth: "230px", minHeight: "230px", width: "230px" }}
                        />
                    </Link>
                    <Typography variant="h1">Page not found</Typography>
                </>
                :
                <Box sx={{ maxWidth: "300px" }}>
                    <Paper
                        fullWidth
                        enableBackground
                        headerContent={
                            <Box display="flex" alignItems="center" flexDirection="column" gap="20px">
                                <Typography variant="h2">Select Network</Typography>
                                <Box>
                                    <Typography sx={{ lineHeight: "1.2em", fontSize: "0.88em" }}>
                                        Here is the list of networks where the protocol has been deployed.
                                    </Typography>
                                </Box>
                            </Box>
                        }
                    >
                        {chains.map(chain => {
                            return (
                                <Button
                                    key={chain.name}
                                    id={`select-network-menu-button-${chain.id}`}
                                    variant="text"
                                    size="large"
                                    color="secondary"
                                    sx={{ justifyContent: "start", paddingTop: "10px" }}
                                    onClick={() => handleChange(chain.id)}
                                    fullWidth
                                >
                                    <Box
                                        display="flex"
                                        flexDirection="row"
                                        justifyContent="space-between"
                                        alignItems="center"
                                        gap="15px"
                                    >
                                        <SvgIcon component={EthIcon} viewBox="0 0 32 32" />
                                        <Typography fontSize="1.2em">{chain.name}</Typography>
                                    </Box>
                                </Button>
                            )
                        })}
                    </Paper>
                </Box>
            }
        </Box>
    );
}