import { useEffect } from "react";
import ReactGA from "react-ga4";
import { useNavigate, useParams, useLocation } from "react-router-dom";

import { Box, Container, Grid, Divider, Typography, useMediaQuery } from "@mui/material";

import Paper from "../../components/Paper/Paper";
import PageTitle from "../../components/PageTitle/PageTitle";
import { PrimaryButton } from "../../components/Button";

import GovernanceInfoText from "./components/GovernanceInfoText";
import ProposalsList from "./components/ProposalsList";
import { ProposalsCount, MinQuorumPercentage, ProposalThreshold } from "./components/Metric";

import { useTokenSymbol } from "../../hooks/tokens";

const Governance = ({ connect, config, address, chainId }) => {
    const location = useLocation();
    const navigate = useNavigate();
    const { network } = useParams();

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

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

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

    return (
        <Box>
            <PageTitle name="Protocol Governance" subtitle={`Cast $${ghstSymbol} to facilitate DAO decisions`} />
            <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">
                                    Proposal Requirements
                                </Typography>
                            </Box>
                        }
                    >
                        <Grid container spacing={1}>
                            <Grid item xs={isSmallScreen ? 12 : 4}>
                                <ProposalsCount chainId={chainId} />
                            </Grid>
                            <Grid item xs={isSmallScreen ? 12 : 4}>
                                <MinQuorumPercentage chainId={chainId} ghstSymbol={ghstSymbol} />
                            </Grid>
                            <Grid item xs={isSmallScreen ? 12 : 4}>
                                <ProposalThreshold chainId={chainId} ghstSymbol={ghstSymbol} />
                            </Grid>
                        </Grid>

                        <Box mt="45px" display="flex" flexDirection="column" alignItems="center" justifyContent="center">
                            <PrimaryButton
                                fullWidth
                                onClick={() => navigate(`/${network}/governance/create`)}
                                sx={{ maxWidth: isSemiSmallScreen ? "100%" : "350px" }}
                            >
                                Create Proposal
                            </PrimaryButton>
                            <Box textAlign="center" mt="15px">
                                <GovernanceInfoText />
                            </Box>
                        </Box>
                    </Paper>
                    <ProposalsList address={address} config={config} chainId={chainId} />
                </Box>
            </Container>
        </Box>
    )
}

export default Governance;