import { Dispatch, SetStateAction, useState, useEffect } from "react";
import { Box, Container, Grid, Divider, Typography, Link, useMediaQuery, useTheme } from "@mui/material";
import ReactGA from "react-ga4";

import Paper from "../../components/Paper/Paper";
import PageTitle from "../../components/PageTitle/PageTitle";
import InfoTooltip from "../../components/Tooltip/InfoTooltip";
import Countdown from "../../components/Countdown/Countdown";
import { PrimaryButton } from "../../components/Button";
import { DecimalBigNumber } from "../../helpers/DecimalBigNumber";

import Stake from "./Stake";
import FarmPools from "./components/FarmPools";
import StakeInfoText from "./components/StakeInfoText";
import { ClaimsArea } from "./components/ClaimsArea";
import { Apy, CurrentIndex, TotalDeposit } from "./components/Metric";

import { useEpoch } from "../../hooks/staking";

export const StakeContainer = ({ chainId, address, connect }) => {
    const [isModalOpened, handleModal] = useState(false);

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

    const { epoch, refetch: refetchEpoch } = useEpoch(chainId);

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

    if (isModalOpened) {
        return (
            <Stake
                chainId={chainId}
                address={address}
                isOpened={isModalOpened}
                connect={connect}
                closeModal={() => handleModal(false)}
            />
        )
    }

    return (
        <Box >
            <PageTitle name="Protocol Staking" subtitle="Stake your FTSO to earn rebase yields" />
            <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 sx={{ mt: "15px" }}>
                    <Paper
                        fullWidth
                        enableBackground
                        headerContent={
                            <Box display="flex" alignItems="center" flexDirection="row" gap="5px">
                                <Typography variant="h6">
                                    Rebase&nbsp;
                                    <Countdown otherwise="Ready" targetDate={new Date(epoch.end * 1000)} />
                                </Typography>

                            </Box>
                        }
                    >
                        <Grid container spacing={1}>
                            <Grid item xs={isSmallScreen ? 12 : 4}>
                                <Apy distribute={epoch.distribute} chainId={chainId} />
                            </Grid>
                            <Grid item xs={isSmallScreen ? 12 : 4}>
                                <TotalDeposit chainId={chainId} />
                            </Grid>
                            <Grid item xs={isSmallScreen ? 12 : 4}>
                                <CurrentIndex chainId={chainId} />
                            </Grid>
                        </Grid>

                        <Divider sx={{ marginTop: "30px" }} />
                        <ClaimsArea chainId={chainId} address={address} epoch={epoch} />
                        <Divider />

                        <Box mt="15px" display="flex" flexDirection="column" alignItems="center" justifyContent="center">
                            <PrimaryButton
                                fullWidth
                                onClick={() => handleModal(true)}
                                sx={{ maxWidth: isSemiSmallScreen ? "100%" : "350px" }}
                            >
                                Start staking
                            </PrimaryButton>
                            <Box textAlign="center" mt="15px">
                                <StakeInfoText />
                            </Box>
                        </Box>
                    </Paper>
                    <FarmPools chainId={chainId} />
                </Box>
            </Container>
        </Box>
    )
};

export default StakeContainer;