import React 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 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 ForumIcon from '@mui/icons-material/Forum';
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 } from "../../constants";
import { AVAILABLE_DEXES } from "../../constants/dexes";
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 { useTokenSymbol } from "../../hooks/tokens";
import { useFtsoPrice, useGhstPrice } from "../../hooks/prices";
import { useLiveBonds } from "../../hooks/bonds/index";

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 { liveBonds: ghostBonds } = useLiveBonds(chainId);
    const ftsoPrice = useFtsoPrice(chainId);
    const ghstPrice = useGhstPrice(chainId);

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

    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" }}
                            />
                        </Link>
                        <Box display="flex" flexDirection="column" mt="10px">
                            <Box fontSize="12px" fontWeight="500" lineHeight={"15px"}>
                                {ftsoSymbol} Price: {formatCurrency(ftsoPrice, 2)}
                            </Box>
                            <Box fontSize="12px" fontWeight="500" lineHeight="15px">
                                {ghstSymbol} Price: {formatCurrency(ghstPrice, 2)}
                            </Box>
                        </Box>
                    </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="/dashboard" />
                                    <NavItem
                                        defaultExpanded
                                        icon={BondIcon}
                                        label={`Bond`}
                                        to="/bonds"
                                        children={
                                            <AccordionDetails style={{ margin: "0 0 -20px", display: "flex", flexDirection: "column", gap: "10px" }}>
                                                {sortBondsByDiscount(ghostBonds).map((bond, index) => {
                                                    return (
                                                        <Link
                                                            component={NavLink}
                                                            to={`/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={StakeIcon} label={`Stake`} to="/stake" />
                                    <NavItem icon={ShowerIcon} label={`Faucet`} to="/faucet" />
                                    <NavItem
                                        icon={CurrencyExchangeIcon}
                                        label={`Dex`}
                                        to={'/dex/uniswap'}
                                        children={
                                            <AccordionDetails style={{ margin: "0 0 -10px", display: "flex", flexDirection: "column", gap: "10px" }}>
                                                {AVAILABLE_DEXES[chainId].map((dex, index) => {
                                                    return (
                                                        <Link
                                                            component={NavLink}
                                                            to={`/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>
                                        }
                                    />
                                    <Box className="menu-divider">
                                      <Divider />
                                    </Box>
                                </>
                            }

                            <NavItem icon={PublicIcon} label={`Bridge`}  href="https://bridge.ghostchain.io/" />
                            <NavItem
                                to=''
                                icon={PublicIcon}
                                label={`Ecosystem`}
                                children={
                                    <AccordionDetails style={{ margin: "0 0 -10px", display: "flex", flexDirection: "column", gap: "10px" }}>
                                        {ECOSYSTEM.map((item, index) => {
                                            return (
                                                <Link
                                                    href={item.link}
                                                    target="_blank"
                                                    rel="noopener noreferrer"
                                                    key={index}
                                                    style={{ textDecoration: "none" }}
                                                >
                                                    <Box display="flex" justifyContent="end">
                                                        <Typography style={{ display: "flex", alignItems: "center" }} >
                                                            {item.name}
                                                        </Typography>
                                                    </Box>
                                                </Link>
                                            )
                                        })}
                                    </AccordionDetails>
                                }
                            />
                        </div>
                    </div>
                </div>

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

                <Box>
                    <NavItem href="http://ghostchain.io/builders" icon={ForumIcon} label={`Forum`} />
                    <NavItem href="https://docs.ghostchain.io/" icon={BookIcon} label={`Docs`} />
                    <NavItem href="https://git.ghostchain.io/ghostchain/ghost-dao-contracts/issues" icon={ErrorOutlineIcon} label={`Git Issues`} />
                    <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;