import { Box, Tab, Tabs, Container, useMediaQuery } from "@mui/material";
import { useEffect, useState } from "react";
import ReactGA from "react-ga4";

import Paper from "../../components/Paper/Paper";
import Metric from "../../components/Metric/Metric";
import MetricCollection from "../../components/Metric/MetricCollection";
import PageTitle from "../../components/PageTitle/PageTitle";

import { formatCurrency } from "../../helpers";
import { DecimalBigNumber } from "../../helpers/DecimalBigNumber";

import { BondList } from "./components/BondList";
import { ClaimBonds } from "./components/ClaimBonds";

import { useLiveBonds } from "../../hooks/bonds";
import { useTotalReserves } from "../../hooks/treasury";
import { useFtsoPrice } from "../../hooks/prices";
import { useTokenSymbol } from "../../hooks/tokens";

const Bonds = ({ chainId, address, connect }) => {
    const [isZoomed] = useState(false);
    const [secondsTo, setSecondsTo] = useState(0);

    const isSmallScreen = useMediaQuery("(max-width: 650px)");
    const isVerySmallScreen = useMediaQuery("(max-width: 379px)");

    useEffect(() => {
        ReactGA.send({ hitType: "pageview", page: "/bonds" });
    }, []);

    const { liveBonds } = useLiveBonds(chainId);
    const totalReserves = useTotalReserves(chainId);
    const ftsoPrice = useFtsoPrice(chainId);

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

    useEffect(() => {
        const interval = setInterval(() => {
            const date = Math.round(Date.now() / 1000);
            setSecondsTo(date);
        }, 1000);
        return () => clearInterval(interval);
    }, []);

    return (
        <Box>
            <PageTitle name={"Protocol Bonding"} subtitle={`Buy ${ftsoSymbol} from the protocol at a discount`} />
            <Container
                style={{
                    paddingLeft: isSmallScreen || isVerySmallScreen ? "0" : "3.3rem",
                    paddingRight: isSmallScreen || isVerySmallScreen ? "0" : "3.3rem",
                    minHeight: "calc(100vh - 128px)",
                    display: "flex",
                    flexDirection: "column",
                    justifyContent: "center"
                }}
            >
                <Box display="flex" alignItems="center" justifyContent="center" flexDirection="column">
                    <Paper headerText="Active bonds" fullWidth enableBackground>
                        <MetricCollection>
                            <Metric
                                label={`Treasury Balance`}
                                metric={formatCurrency(totalReserves, 2)}
                                isLoading={false}
                            />
                            <Metric
                                label={`${ftsoSymbol} price`}
                                metric={formatCurrency(ftsoPrice, 2)}
                                isLoading={false}
                            />
                        </MetricCollection>

                        <Box mt="24px">
                            <Box mt="24px">
                                <BondList chainId={chainId} bonds={liveBonds} secondsTo={secondsTo} />
                            </Box>
                        </Box>
                    </Paper>
                    <ClaimBonds chainId={chainId} secondsTo={secondsTo} address={address} />
                </Box>
            </Container>
        </Box>
    );
};

export default Bonds;