import {Box, Grid, Stack, Typography} from "@mui/material";
import {chartLineColor} from "../../themes/colorConst";
import {useEffect, useState} from "react";
import {dummyData1, dummyData2} from "./DummyRecord";
import RankingHorizontalBarChart from "./RankingHorizontalBarChart";
import MainCard from "../../components/MainCard";

const CardHorizontalBarchartContent = ({
                                           selectedYear,
                                           chartData,
                                           mean,
                                           median,
                                           customCategoryType,
                                           useWhiteBoarder,
                                           chartColorAlt
                                       }) => {

    const [year, setYear] = useState(selectedYear);
    const [meanValue, setMeanValue] = useState(mean);
    const [medianValue, setMedianValue] = useState(median);
    const [data, setData] = useState(dummyData2);
    const [fixCategoryType, setFixCategoryType] = useState(customCategoryType);

    useEffect(() => {
        setData(dummyData1);
        setFixCategoryType(customCategoryType);
    }, []);

    useEffect(() => {
        setYear(selectedYear)
    }, [selectedYear]);

    useEffect(() => {
        setMeanValue(mean)
    }, [mean]);

    useEffect(() => {
        setMedianValue(median)
    }, [median]);

    useEffect(() => {
        //TODO: use api here with year to get data
        setData(chartData)
        setFixCategoryType(fixCategoryType.slice(0, chartData[0].data.length))
    }, [chartData]);

    return (
        <Box>
            <Grid container spacing={2}>
                <Grid item xl={12} xs={12} md={12} sx={{ml:'10px',mt: '10px'}} >
                    <RankingHorizontalBarChart
                        dummyData={data}
                        year={year}
                        categoryType={fixCategoryType}
                        mean={meanValue}
                        median={medianValue}
                        max={data[0].data[0]*1.2}
                        borderColor={chartLineColor[useWhiteBoarder ? 0 : 1]}
                        chartColorAlt={chartColorAlt}
                    />
                </Grid>
                <Grid container>
                    <Grid item xs={6} md={6} xl={6}>
                        <Box sx={{borderRight: 1}}>
                            <MainCard sx={{mt: 2}} border={false}>
                                <Stack spacing={2} alignItems="center">
                                    <Typography variant="h6" color="textSecondary" className="number-default">
                                        Total Awards
                                    </Typography>
                                    <Typography variant="h3">47</Typography>
                                </Stack>
                            </MainCard>
                        </Box>
                    </Grid>
                    <Grid item xl={6} xs={6} md={6}>
                        <MainCard sx={{mt: 2}} border={false}>
                            <Stack spacing={2} alignItems="center">
                                <Typography variant="h6" color="textSecondary" className="number-default">
                                    Total Event
                                </Typography>
                                <Typography variant="h3">52</Typography>
                            </Stack>
                        </MainCard>
                    </Grid>
                </Grid>


            </Grid>
        </Box>
    );
}

export default CardHorizontalBarchartContent;
