import {Box, Grid, Link, Stack, Typography} from "@mui/material";
import RankingTable from "./RankingTable";
import Image from "mui-image";
import celebration from 'assets/images/display/celebration.png';
import MainCard from "../../components/MainCard";
import * as React from "react";
import {Link as RouterLink} from "react-router-dom";
import {useEffect, useState} from "react";
import axios from "axios";
import {apiPath} from "../../auth/utils";
import {GET_EVENT_YEAR_AWARD, GET_EVENT_YEAR_COUNT} from "../../utils/ApiPathConst";
//import MainCard from "../../components/MainCard";

const CardBarchartContent = ({
                                 boardData,
                                 selectedYear,
                                 viewDivisionOnly
                                 //chartColorAlt
                             }) => {

    const [eventCount, setEventCount] = useState(0);
    const [awardCount, setAwardCount] = useState(0);
    const userSubDivisionId = localStorage.getItem('subDivisionId');

    function getYearCount(){
        axios.get(`${apiPath}${GET_EVENT_YEAR_COUNT}`,{
            params:{
                year: selectedYear,
                userSubDivisionId: viewDivisionOnly? userSubDivisionId : null

            }
        })
            .then((response) => {
                if (response.status === 200) {
                    setEventCount(response.data.data.count);
                }
            })
            .catch(error => {
                console.log(error);
                return false;
            });
    }

    function getYearAward(){
        axios.get(`${apiPath}${GET_EVENT_YEAR_AWARD}`,{
            params:{
                year: selectedYear,
                userSubDivisionId: viewDivisionOnly? userSubDivisionId : null
            }
        })
            .then((response) => {
                if (response.status === 200) {
                    setAwardCount(response.data.data.count);
                }
            })
            .catch(error => {
                console.log(error);
                return false;
            });
    }


    useEffect(() => {
        getYearCount();
        getYearAward();
    }, []);

    useEffect(() => {
        getYearCount();
        getYearAward();
    }, [selectedYear, viewDivisionOnly]);

    return (
        <Box>
            {
                <Grid container >
                    <Grid item xs={12} md={12} xl={12}>
                        <RankingTable
                            boardData={boardData}
                        />
                        <Grid container>
                            <Grid item xs={6} md={6} xl={6}>
                                <Box>
                                    <MainCard sx={{mt: 2, background: 'rgba(0,0,0,0)'}} border={false}>
                                        <Stack spacing={2} alignItems="center">
                                            <Typography color="textSecondary" className="number-three">
                                                Total Awards
                                            </Typography>
                                            <Typography variant="h3">
                                                <Link color="#333333" component={RouterLink} underline="always" to={"/award?year=" + selectedYear + "&userSubDivision=" + viewDivisionOnly}>
                                                    {awardCount}
                                                </Link>

                                            </Typography>
                                        </Stack>
                                    </MainCard>
                                </Box>
                            </Grid>
                            <Grid item xl={6} xs={6} md={6}>
                                <MainCard sx={{mt: 2, background: 'rgba(0,0,0,0)'}} border={false}>
                                    <Stack spacing={2} alignItems="center">
                                        <Typography color="textSecondary" className="number-three">
                                            Total Event
                                        </Typography>
                                        <Typography variant="h3">
                                            <Link color="#333333" component={RouterLink} underline="always" to={"/event?year=" + selectedYear + "&userSubDivision=" + viewDivisionOnly}>
                                                {eventCount}
                                            </Link>

                                        </Typography>
                                    </Stack>
                                </MainCard>
                            </Grid>
                        </Grid>
                    </Grid>
                    <Box sx={{display: 'flex', alignItems: 'center', justifyContent: "center"}}>
                        <Grid item xs={6} md={5} xl={3}>
                            <Image
                                fit={"contain"}
                                sx={{objectFit: "contain"}}
                                src={celebration}
                            />
                        </Grid>
                    </Box>
                </Grid>
            }
        </Box>
    );
}

export default CardBarchartContent;
