import { useMemo } from "react";

import "./Sidebar.scss";

import {
    Box,
    Grid,
    Link,
    Paper,
    SvgIcon,
    Typography,
    Divider,
    Accordion,
    AccordionSummary,
    AccordionDetails,
} from "@mui/material";
import { styled } from "@mui/material/styles";
import { NavLink } from "react-router-dom";
import { useSwitchChain } from "wagmi";

import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
import GitHubIcon from '@mui/icons-material/GitHub';
import XIcon from '@mui/icons-material/X';
import TelegramIcon from '@mui/icons-material/Telegram';
import HowToVoteIcon from '@mui/icons-material/HowToVote';
import HubIcon from '@mui/icons-material/Hub';
import PublicIcon from '@mui/icons-material/Public';
import ForkRightIcon from '@mui/icons-material/ForkRight';
import GavelIcon from '@mui/icons-material/Gavel';
import CasinoIcon from '@mui/icons-material/Casino';
import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline';
import BookIcon from '@mui/icons-material/Book';
import CurrencyExchangeIcon from '@mui/icons-material/CurrencyExchange';

import GhostIcon from "../../assets/icons/ghost-nav-header.svg?react";
import NavItem from "../NavItem/NavItem";
import GhostStyledIcon from "../Icon/GhostIcon";
import DiscordIcon from "../Icon/DiscordIcon";
import BondIcon from "../Icon/BondIcon";
import StakeIcon from "../Icon/StakeIcon";
import WrapIcon from "../Icon/WrapIcon";

import { isNetworkAvailable, isNetworkLegacy, isGovernanceAvailable } from "../../constants";
import { AVAILABLE_DEXES } from "../../constants/dexes";
import { GATEKEEPER_ADDRESSES } from "../../constants/addresses";
import { ECOSYSTEM } from "../../constants/ecosystem";
import { DecimalBigNumber } from "../../helpers/DecimalBigNumber";
import { sortBondsByDiscount, formatCurrency } from "../../helpers";
import BondDiscount from "../../containers/Bond/components/BondDiscount";

import DashboardIcon from '@mui/icons-material/Dashboard';
import ShowerIcon from '@mui/icons-material/Shower';
import WifiProtectedSetupIcon from '@mui/icons-material/WifiProtectedSetup';

import { useTokenSymbol } from "../../hooks/tokens";
import { useLiveBonds } from "../../hooks/bonds/index";
import pckg from "../../../package.json"

const PREFIX = "NavContent";

const classes = {
    gray: `${PREFIX}-gray`,
};

const StyledBox = styled(Box)(({ theme }) => ({
    [`& .${classes.gray}`]: {
        color: theme.colors.gray[90],
    },
}));

const NavContent = ({ chainId, addressChainId }) => {
    const { chains } = useSwitchChain();
    const chainName = useMemo(() => {
        return chains.find(chain => chain.id === chainId).name.toLowerCase();
    }, [chains, chainId, addressChainId])

    const { liveBonds: ghostBonds } = useLiveBonds(chainId);
    const { symbol: ftsoSymbol } = useTokenSymbol(chainId, "FTSO");
    const { symbol: ghstSymbol } = useTokenSymbol(chainId, "GHST");

    const bridgeNumbers = useMemo(() => {
        const connectedNetworks = Object.keys(GATEKEEPER_ADDRESSES).length;
        const number = 1 + connectedNetworks * 3;
        return `(${number}, ${number})`;
    }, [chainId]);

    return (
        <Paper className="dapp-sidebar">
            <Box className="dapp-sidebar-inner" display="flex" justifyContent="space-between" flexDirection="column">
                <div className="dapp-menu-top">
                    <Box className="branding-header">
                        <Link href="https://app.dao.ghostchain.io" target="_blank" rel="noopener noreferrer">
                            <SvgIcon
                                color="primary"
                                viewBox="0 0 400 372"
                                component={GhostIcon}
                                style={{ width: "150px", height: "150px" }}
                            />
                        <Box mb="10px" mt="-40px" fontSize="12px" fontWeight="500" lineHeight={"15px"}>
                                Version {pckg.version}
                            </Box>
                        </Link>
                    </Box>

                    <Box className="menu-divider">
                        <Divider />
                    </Box>

                    <div className="dapp-menu-links">
                        <div className="dapp-nav" id="navbarNav">
                            {isNetworkAvailable(chainId, addressChainId) &&
                                <>
                                    <NavItem icon={DashboardIcon} label={`Dashboard`} to={`/${chainName}/dashboard`} />
                                    <NavItem
                                        icon={CurrencyExchangeIcon}
                                        label={`(3, 3) Swap`}
                                        to={`/${chainName}/dex/uniswap`}
                                        children={
                                            AVAILABLE_DEXES[chainId].length > 1 && <AccordionDetails style={{ margin: "0 0 -10px", display: "flex", flexDirection: "column", gap: "10px" }}>
                                                {AVAILABLE_DEXES[chainId].map((dex, index) => {
                                                    return (
                                                        <Link
                                                            component={NavLink}
                                                            to={`/${chainName}/dex/${dex.name.toLowerCase()}`}
                                                            key={index}
                                                            style={{ textDecoration: "none" }}
                                                        >
                                                            <Box display="flex" alignItems="center" justifyContent="end">
                                                                <GhostStyledIcon color="inherit" viewBox={dex.viewBox} component={dex.icon} />
                                                                {dex.name} v2
                                                            </Box>
                                                        </Link>
                                                    )
                                                })}
                                            </AccordionDetails>
                                        }
                                    />
                                <NavItem icon={StakeIcon} label={`(3, 3) Stake`} to={`/${chainName}/stake`} />
                                    <NavItem
                                        defaultExpanded
                                        icon={BondIcon}
                                        label={`(1, 1) Bond`}
                                        to={`/${chainName}/bonds`}
                                        children={
                                            <AccordionDetails style={{ margin: "0 0 -20px", display: "flex", flexDirection: "column", gap: "10px" }}>
                                                {sortBondsByDiscount(ghostBonds).map((bond, index) => {
                                                    return (
                                                        <Link
                                                            component={NavLink}
                                                            to={`/${chainName}/bonds/${bond.id}`}
                                                            key={index}
                                                            style={{ textDecoration: "none" }}
                                                        >
                                                            <Box mb="10px" display="flex" justifyContent="end">
                                                                <Typography
                                                                    style={{
                                                                        width: "180px",
                                                                        justifyContent: "space-between",
                                                                        display: "flex",
                                                                        gap: "10px"
                                                                    }}
                                                                    component="span"
                                                                    variant="body2"
                                                                >
                                                                    {bond.displayName}
                                                                    <BondDiscount textOnly discount={bond.discount} />
                                                                </Typography>
                                                            </Box>
                                                        </Link>
                                                    )
                                                })}
                                            </AccordionDetails>
                                        }
                                    />
                                <NavItem icon={ForkRightIcon} label={`${bridgeNumbers} GHOST Staking`} to={`/${chainName}/bridge`} />
                                    {isGovernanceAvailable(chainId, addressChainId) && <NavItem icon={GavelIcon} label={`Governance`} to={`/${chainName}/governance`} />}
                                    <Box className="menu-divider">
                                        <Divider />
                                    </Box>
                                </>
                            }
                        </div>
                    </div>
                </div>

                <Box>
                    <NavItem href="http://ecosystem.ghostchain.io" icon={PublicIcon} label={`Ecosystem`} />
                    <NavItem href="https://ghostchain.io/game-theory-3-3" icon={CasinoIcon} label={`(3, 3) Game Theory`} />
                    <NavItem href="https://docs.ghostchain.io/" icon={BookIcon} label={`Documentation`} />
                    <StyledBox display="flex" justifyContent="space-around" paddingY="24px">
                        <Link href="https://git.ghostchain.io/ghostchain/ghost-dao-contracts" target="_blank" rel="noopener noreferrer">
                            <GhostStyledIcon viewBox="0 0 24 24" component={GitHubIcon} className={classes.gray} />
                        </Link>
                        <Link href="https://x.com/realGhostChain" target="_blank" rel="noopener noreferrer">
                            <GhostStyledIcon viewBox="0 0 24 24" component={XIcon} className={classes.gray} />
                        </Link>
                        <Link href="https://discord.gg/CvYP7vrqN3" target="_blank" rel="noopener noreferrer">
                            <GhostStyledIcon viewBox="0 0 24 24" component={DiscordIcon} className={classes.gray} />
                        </Link>
                        <Link href="https://t.me/realGhostChain" target="_blank" rel="noopener noreferrer">
                            <GhostStyledIcon viewBox="0 0 24 24" component={TelegramIcon} className={classes.gray} />
                        </Link>
                    </StyledBox>
                </Box>
            </Box>
        </Paper>
    );
};

export default NavContent;