import {useCallback, useEffect, useState} from 'react';

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

// third-party
import ReactApexChart from 'react-apexcharts';
import * as EgovNet from 'api/egovFetch';

// chart options
const areaChartOptions = {
    chart: {
        type: 'donut',
    },
    plotOptions: {
        pie: {
            startAngle: -90,
            endAngle: 90,
            offsetY: 10,
            expandOnClick:false,
        }
    },
    dataLabels: {
        enabled: true
    },
    title: {
        text: `${new Date().getFullYear()}년 ${new Date().getMonth() + 1}월`,
        align: 'center'
    },
    responsive: [{
        breakpoint: 480,
        options: {
            chart: {
                width: 200
            },
            legend: {
                position: 'bottom'
            }
        }
    }],
    grid: {
        padding: {
            bottom: -150
        }
    },
};

// ==============================|| REPORT AREA CHART ||============================== //

const ReportAreaChart = () => {
    const theme = useTheme();

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

    const [options, setOptions] = useState(areaChartOptions);
    const [connectMethod, setConnectMethod] = useState([]);

    // 메뉴 접속 및 방문자 수
    const retrieveList = useCallback(() => {
        const retrieveListURL = '/admin/dashboard/connect-method'

        const requestOptions = {
            method: "POST",
            headers: {
                'Content-type': 'application/json',
            },
            // body: JSON.stringify()
        }

        EgovNet.requestFetch(retrieveListURL,
            requestOptions,
            (resp) => {
                setConnectMethod(resp.result.connectMethod[0]);
            },
            function (resp) {
                console.log("err response : ", resp);
            }
        );
        // eslint-disable-next-lie react-hooks/exhaustive-deps
    }, []);

    useEffect(() => {
        retrieveList();

        setOptions((prevState) => ({
            ...prevState,
            labels: ['PC', 'Mobile'],
            colors: ['#448EF7', '#FFC107'],
            // colors: [theme.palette.warning.main],
            grid: {
                borderColor: line
            },
            tooltip: {
                theme: 'light'
            },
            legend: {
                position: 'bottom',
                labels: {
                    colors: 'grey.500'
                }
            }
        }));
    }, [primary, secondary, line, theme, retrieveList]);

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

    useEffect(() => {
        setSeries(connectMethod);
    }, [connectMethod]);

    return <ReactApexChart options={options} series={series} type="donut" />;
};

export default ReportAreaChart;