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,
    });
    const selectedSeries = Object.entries(series).filter(item => item[1] === true);
    let seriesY = selectedSeries.map(item => {
        return {
            dataKey: item[0],
            label: item[0],
            barLabel: selectedSeries.length === 1 ? ('value' as const) : undefined,
        }
    });
    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;