import { BarChart } from '@mui/x-charts/BarChart';
import { LineChart } from '@mui/x-charts/LineChart';
import Container from '@mui/material/Container';
import type { tGroup } from "../groupdata";
import { useState } from 'react';
import SettingChart from "./SettingChart";

type GroupProps = {
    data: tGroup;
};


function GroupChart({ data }: GroupProps) {
    const [isBar, setIsBar] = useState(true);
    const [series, setSeries] = useState({
        'Максимальная высота': true,
        'Средняя высота': false,
        'Минимальная высота': false,
    });
    let seriesY = Object.entries(series)
        .filter(item => item[1] == true)
        .map(item => {
            return {
                "dataKey": item[0], "label": item[0], barLabel: Object.entries(series)
                    .filter(item => item[1] == true).length == 1 ? "value" : ""
            }
        });
    const chartSetting = {
        yAxis: [{ label: 'Высота (м)' }],
        height: 400,
    };

    return (
        <Container maxWidth="lg">
            {isBar && <BarChart
                dataset={data}
                xAxis={[{ scaleType: 'band', dataKey: 'Группа' }]}
                series={seriesY}
                slotProps={{
                    legend: {
                        position: { vertical: 'bottom', horizontal: 'center' },
                    }
                }}
                {...chartSetting}
            />}
            {!isBar &&<LineChart
                dataset={data}
                xAxis={[{ scaleType: 'band', dataKey: 'Группа' }]}
                series={seriesY}
                slotProps={{
                    legend: {
                        position: { vertical: 'bottom', horizontal: 'center' },
                    },
                }}
                {...chartSetting}
            />}
            <SettingChart series={series} setSeries={setSeries} isBar={isBar} setIsBar={setIsBar} />
        </Container>
    )
};

export default GroupChart;