import {Box, Grid} from "@mui/material";
import RankingTable from "./RankingTable";
import RankingColumnChart from "./RankingColumnChart";
import {chartLineColor} from "../../themes/colorConst";
import {useEffect, useState} from "react";
import {categoryType, dummyData1, dummyData2} from "./DummyRecord";

const CardBarchartContent = ({
                         reverse,
                         selectedYear,
                         chartData,
                         boardData,
                         mean,
                         median,
                         useWhiteBoarder
                     }) => {

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

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

    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(categoryType.slice(0, chartData[0].data.length))
    }, [chartData]);

    useEffect(() => {
        //TODO: use api here with year to get data
        setRankingData(boardData)
    }, [boardData]);

    return (
        <Box>
            {
                reverse ?
                    <Grid container spacing={2}>
                        <Grid item xl={6} xs={12} md={6} sx={{mt: '75px'}}>
                            <RankingColumnChart
                                dummyData={data}
                                year={year}
                                categoryType={fixCategoryType}
                                mean={meanValue}
                                median={medianValue}
                                borderColor={chartLineColor[useWhiteBoarder? 0 : 1]}
                            />
                        </Grid>
                        <Grid item xl={6} xs={12} md={6} sx={{mt: '75px'}}>
                            <RankingTable
                                boardData={rankingData}
                            />
                        </Grid>
                    </Grid>
                    :
                    <Grid container spacing={2}>
                        <Grid item xl={6} xs={12} md={6} sx={{mt: '75px'}}>
                            <RankingTable
                                boardData={rankingData}
                            />
                        </Grid>
                        <Grid item xl={6} xs={12} md={6}sx={{mt: '75px'}}>
                            <RankingColumnChart
                                dummyData={data}
                                year={year}
                                categoryType={fixCategoryType}
                                mean={meanValue}
                                median={medianValue}
                                borderColor={chartLineColor[useWhiteBoarder? 0 : 1]}
                            />
                        </Grid>

                    </Grid>
            }
        </Box>
    );
}

export default CardBarchartContent;
