import {useEffect, useState} from 'react';

// material-ui
import {useTheme} from '@mui/material/styles';

// third-party
import ReactApexChart from 'react-apexcharts';
//import {piechartColor1, piechartColor2} from "../../themes/colorConst";
//import {categoryType} from "./DummyRecord";
// chart options


const pieChartOptions = {
    chart: {
        type: 'donut',
    },
    legend: {
        fontSize: '16px',
        position: 'bottom',
        horizontalAlign: 'left',
    },
    dataLabels: {
        style: {
            fontSize: '16px'
        }
    },
    responsive: [{
        breakpoint: 480,
        options: {
            chart: {
                width: 30
            },
            legend: {
                position: 'bottom'
            }
        }
    }]
};
// ==============================|| SALES COLUMN CHART ||============================== //

const RankingPieChart = ({
                             chartType,
                             chartData,
                             categoryType,
                             legendPosition,
                         }) => {
    const theme = useTheme();

    const {primary, secondary} = theme.palette.text;
    const line = theme.palette.divider;

    const warning = theme.palette.warning.main;
    const primaryMain = theme.palette.primary.main;
    const successDark = theme.palette.success.dark;

    const [series, setSeries] = useState(chartData);

    const [options, setOptions] = useState(pieChartOptions);

    const [fixCategoryType, setFixCategoryType] = useState(categoryType);

    useEffect(() => {
        setSeries(chartData);
        setFixCategoryType(categoryType)
    }, [chartData, categoryType]);


    useEffect(() => {
        setOptions((prevState) => ({
            ...prevState,
            chart: {
                type: chartType,
            },
            labels: fixCategoryType,
            //colors: chartColorAlt? piechartColor1 : piechartColor2,
            tooltip: {
                theme: 'light'
            },
            legend: {
                position: legendPosition,
            },
        }));
    }, [primary, secondary, line, warning, primaryMain, successDark, fixCategoryType]);

    return (
        <div id="chart">
            <ReactApexChart
                height="320px"
                options={options}
                series={series}
                type={chartType}
            />
        </div>
    );
};

RankingPieChart.defaultProps = {
    max: 20,
    chartType: 'pie'
}

export default RankingPieChart;
