import {useEffect, useState} from 'react';

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

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


const columnChartOptions = {
    chart: {
        type: 'bar',
        height: '100%',
        toolbar: {
            show: false
        }
    },
    plotOptions: {
        bar: {
            distributed: true,
            columnWidth: '30%',
            borderRadius: 4
        }
    },
    dataLabels: {
        enabled: false
    },
    stroke: {
        show: true,
        width: 8,
        colors: ['transparent']
    },
    yaxis: {
        title: {
            text: '$(thousands)'
        }
    },
    fill: {
        colors: chartColor,
        opacity: 1
    },
    tooltip: {
        y: {
            formatter(val) {
                return `${val} awards`;
            }
        }
    },
    legend: {
        show: false,
        fontFamily: `'Public Sans', sans-serif`,
        offsetX: 10,
        offsetY: 10,
        labels: {
            useSeriesColors: false
        },
        markers: {
            width: 16,
            height: 16,
            radius: '50%',
            offsexX: 2,
            offsexY: 2
        },
        itemMargin: {
            horizontal: 15,
            vertical: 50
        }
    },
    responsive: [
        {
            breakpoint: 600,
            options: {
                yaxis: {
                    show: false
                }
            }
        }
    ]
};


// ==============================|| SALES COLUMN CHART ||============================== //

const RankingColumnChart = ({
                                standardLineShow,
                                dummyData,
                                categoryType,
                                max,
                                mean,
                                median,
                                borderColor
                            }) => {
    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(dummyData);

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

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

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


    useEffect(() => {
        setOptions((prevState) => ({
            ...prevState,
            colors: [warning, primaryMain],
            annotations: {
                yaxis: standardLineShow ? [
                    {
                        y: median,
                        borderColor: "green",
                        fillColor: "green",
                        opacity: 0.1,
                        label: {
                            position: "top",
                            textAnchor: "start",
                            borderColor: "green",
                            style: {
                                color: "#fff",
                                background: "green"
                            },
                            text: `Median: ${median}`
                        }
                    }
                    ,
                    {
                        y: mean,
                        borderColor: "red",
                        fillColor: "red",
                        opacity: 0.1,
                        label: {
                            borderColor: "red",
                            style: {
                                color: "#fff",
                                background: "red"
                            },
                            text: `Average: ${mean}`
                        }
                    }
                ] : [],

            },
            xaxis: {
                axisBorder: {
                    show: true,
                    color: '#78909C',
                    height: 1,
                    width: '100%',
                    offsetX: 0,
                    offsetY: 0
                },
                categories: fixCategoryType,
                labels: {
                    style: {
                        colors: chartColor,
                    }
                }
            },
            yaxis: {
                axisBorder: {
                    show: true,
                    color: '#78909C',
                    offsetX: 0,
                    offsetY: 0
                },
                min: 0,
                max: max,
                labels: {
                    style: {
                        colors: [secondary]
                    }
                }
            },
            grid: {
                borderColor: borderColor
            },
            tooltip: {
                theme: 'light'
            },
            legend: {
                position: 'top',
                horizontalAlign: 'right',
                labels: {
                    colors: 'grey.500'
                }
            }
        }));
    }, [primary, secondary, line, warning, primaryMain, successDark, mean, median, fixCategoryType]);

    return (
        <div id="chart">
            <ReactApexChart
                options={options}
                series={series}
                type="bar"
            />
        </div>
    );
};

RankingColumnChart.defaultProps = {
    max: 20,
    standardLineValue: 12,
    standardLineShow: true,
    mean: 0,
    median: 0,
}

export default RankingColumnChart;
