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 {makeStyles} from "@mui/styles";
//import {categoryType} from "./DummyRecord";
// chart options


const columnChartOptions = {
    chart: {
        type: 'bar',
        height: '100%',
        width: '100%',
        toolbar: {
            show: false
        },
        zoom: {
            enabled: true,
            type: 'x',
            resetIcon: {
                offsetX: -10,
                offsetY: 0,
                fillColor: '#fff',
                strokeColor: '#37474F'
            },
            selection: {
                background: '#90CAF9',
                border: '#0D47A1'
            }
        }

    },
    plotOptions: {
        bar: {
            barHeight: "100%",
            distributed: true,
            horizontal: true,
            columnWidth: '30%',
            borderRadius: 4,
            dataLabels: {
                position: 'bottom'
            },
        }
    },
    dataLabels: {
        enabled: true,
        textAnchor: 'start',
        style: {
            colors: ['#333'],
            fontSize: '16px',
            fontWeight: 'bold',
        },
        formatter: function (val, opt) {
            return val === 0 ?
              "" :
             opt.w.globals.labels[opt.dataPointIndex] + ":  " + val
        },
        offsetX: 0,
        // dropShadow: {
        //     color: '#fff',
        //     opacity: 0.8,
        //     blur: 2,
        //     enabled: true
        // }
    },
    stroke: {
        show: true,
        width: 1,
        colors: ['transparent']
    },
    yaxis: {
        labels: {
            show: false
        },
        title: {
            text: '$(thousands)'
        }
    },
    fill: {
        colors: chartColor,
        opacity: 0.6
    },
    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 useStyles = makeStyles(() => ({
    chartContainer: {
        height: '270px', // Set the desired height of the chart container using vh
        width: '100%',
        overflow: 'auto',
    },
}));

const RankingHorizontalBarChart = ({
                                detailData,
                                categoryType,
                                recordSize,
                            }) => {
    const theme = useTheme();
    const classes = useStyles();
    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([]);

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

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

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

    // useEffect(() => {
    //     setSeries(detailData);
    //     setFixCategoryType(categoryType);
    // }, [series]);

    useEffect(() => {
        setOptions((prevState) => ({
            ...prevState,
            colors: [warning, primaryMain],
            zoom: {
                enabled: true,
                type: 'y',
                resetIcon: {
                    offsetX: -10,
                    offsetY: 0,
                    fillColor: '#fff',
                    strokeColor: '#37474F'
                },
                selection: {
                    background: '#90CAF9',
                    border: '#0D47A1'
                }
            },
            xaxis: {
                axisBorder: {
                    show: false,
                },
                labels: {
                    style: {
                        colors: 'white'
                    }
                },
                categories: fixCategoryType,
            },
            yaxis: {
                labels: {
                    show: false
                },
                axisBorder: {
                    show: false,
                },
                /*forceNiceScale: true,
                min: 0,
                max: max,
                labels: {
                    align: 'right',
                    minWidth: 150,
                    maxWidth: 500,
                    style: {
                        fontSize: '20px',
                        colors: rankColor,
                        fontWeight: 'bold'
                    }
                }*/
            },
            grid: {
                show: false
            },
            tooltip: {
                theme: 'light'
            },
            legend: {
                position: 'top',
                horizontalAlign: 'right',
                labels: {
                    colors: 'grey.500'
                }
            },
        }));
    }, [primary, secondary, line, warning, primaryMain, successDark, fixCategoryType]);

    return (
        <div className={classes.chartContainer} style={{height: '270px', width: '100%'}} id="chart">
            <ReactApexChart
                options={options}
                series={series}
                width={"100%"}
                height={70+recordSize*30}
                type="bar"
            />
        </div>
    );
};

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

export default RankingHorizontalBarChart;
