import React, {useState, useEffect, useCallback} from 'react';      // PureComponent
import {Link} from 'react-router-dom';          //useLocation

import * as EgovNet from 'api/egovFetch';
import URL from 'constants/url';

// material-ui
import { Box, Button, Grid, Stack, Typography } from '@mui/material';
import MainCard from 'components/cards/MainCard';
import BbsTable from './BbsTable';
import IncomeAreaChart from './IncomeAreaChart';
import MonthlyBarChart from './MonthlyBarChart';
import ReportAreaChart from './ReportAreaChart';
import AnalyticEcommerce from 'components/cards/AnalyticEcommerce';

import {default as EgovLeftNav} from 'components/leftmenu/EgovLeftNavAdmin';

function EgovAdminDashboard(props) {
    // console.group("EgovAdminScheduleList");
    // console.log("[Start] EgovAdminScheduleList ------------------------------");
    // console.log("EgovAdminScheduleList [props] : ", props);

    // const location = useLocation();
    // console.log("EgovAdminScheduleList [location] : ", location);

    const DATE = new Date();
    const [dashboardCnt, setDashboardCnt] = useState({
        ConnMonthlyCount: [[0, 0.0, 0]],
        ErrorMonthlyCount: [[0, 0.0, 0]],
        DocuMonthlyCount: [[0, 0.0, 0]],
        CompMonthlyCount: [[0, 0.0, 0]]
    });

    const retrieveList = useCallback(() => {
        const retrieveListURL = '/admin/dashboard/dash-count';

        const requestOptions = {
            method: "POST",
            headers: {
                'Content-type': 'application/json',
            }
        }

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

    useEffect(() => {
        retrieveList();
    }, [retrieveList]);

    // console.log("------------------------------EgovAdminScheduleList [End]");
    // console.groupEnd("EgovAdminScheduleList");

    // const [value, setValue] = useState('today');
    const [slot, setSlot] = useState('week');
    const [totalDownloads, setTotalDownloads] = useState(0);

    // 총 다운로드 수를 받아온 후 state 업데이트
    const handleTotalDownloads = (sum) => {
        setTotalDownloads(sum);
    };

    return (
        <div className="container">
            <div className="c_wrap">
                {/* <!-- Location --> */}
                <div className="location">
                    <ul>
                        <li><Link to={URL.MAIN} className="home">Home</Link></li>
                        <li><Link to={URL.ADMIN} >사이트관리</Link></li>
                        <li>Dashboard</li>
                    </ul>
                </div>
                {/* <!--// Location --> */}

                <div className="layout">
                    {/* <!-- Navigation --> */}
                    <EgovLeftNav></EgovLeftNav>
                    {/* <!--// Navigation --> */}

                    <div className="contents NOTICE_LIST" id="contents">
                        {/* <!-- 본문 --> */}

                        <div className="top_tit">
                            <h1 className="tit_1">Dashboard</h1>
                        </div>

                        <Grid container rowSpacing={4.5} columnSpacing={2.75}>
                            {/* row 1 */}
                            {/*<Grid item xs={12} sx={{ mb: -2.25 }}>*/}
                            {/*    <Typography variant="h5">Dashboard</Typography>*/}
                            {/*</Grid>*/}
                            <Grid item xs={12} sm={6} md={4} lg={3}>
                                <AnalyticEcommerce title={`총접속자수 (${DATE.getMonth() + 1}월)`} count={dashboardCnt.ConnMonthlyCount[0]?.[0]?.toLocaleString() || '0'} percentage={parseFloat(dashboardCnt.ConnMonthlyCount[0]?.[1]) || 0} extra={dashboardCnt.ConnMonthlyCount[0]?.[2]?.toLocaleString() || '0'} isLoss={dashboardCnt.ConnMonthlyCount[0]?.[1] < 0} color={dashboardCnt.ConnMonthlyCount[0]?.[1] < 0 ? "warning" : "primary"} />
                            </Grid>
                            <Grid item xs={12} sm={6} md={4} lg={3}>
                                <AnalyticEcommerce title={`건설기준 오류건수 (${DATE.getMonth() + 1}월)`} count={dashboardCnt.ErrorMonthlyCount[0]?.[0]?.toLocaleString() || '0'} percentage={parseFloat(dashboardCnt.ErrorMonthlyCount[0]?.[1]) || 0} extra={dashboardCnt.ErrorMonthlyCount[0]?.[2]?.toLocaleString() || '0'} isLoss={dashboardCnt.ErrorMonthlyCount[0]?.[1] < 0} color={dashboardCnt.ErrorMonthlyCount[0]?.[1] < 0 ? "warning" : "primary"}  />
                            </Grid>
                            <Grid item xs={12} sm={6} md={4} lg={3}>
                                <AnalyticEcommerce title={`기준코드 등록건수 (${DATE.getMonth() + 1}월)`} count={dashboardCnt.DocuMonthlyCount[0]?.[0]?.toLocaleString() || '0'} percentage={parseFloat(dashboardCnt.DocuMonthlyCount[0]?.[1]) || 0} extra={dashboardCnt.DocuMonthlyCount[0]?.[2]?.toLocaleString() || '0'} isLoss={dashboardCnt.DocuMonthlyCount[0]?.[1] < 0} color={dashboardCnt.DocuMonthlyCount[0]?.[1] < 0 ? "warning" : "primary"} />
                            </Grid>
                            <Grid item xs={12} sm={6} md={4} lg={3}>
                                <AnalyticEcommerce title={`민원건수 (${DATE.getMonth() + 1}월)`} count={dashboardCnt.CompMonthlyCount[0]?.[0]?.toLocaleString() || '0'} percentage={parseFloat(dashboardCnt.CompMonthlyCount[0]?.[1]) || 0} extra={dashboardCnt.CompMonthlyCount[0]?.[2]?.toLocaleString() || '0'} isLoss={dashboardCnt.CompMonthlyCount[0]?.[1] < 0} color={dashboardCnt.CompMonthlyCount[0]?.[1] < 0 ? "warning" : "primary"} />
                            </Grid>

                            <Grid item md={8} sx={{ display: { sm: 'none', md: 'block', lg: 'none' } }} />

                            {/* row 2 */}
                            <Grid item xs={12} md={7} lg={8}>
                                <Grid container alignItems="center" justifyContent="space-between">
                                    <Grid item>
                                        <Typography variant="h5">{ DATE.getFullYear() }년 메뉴접속 / 방문수 </Typography>
                                    </Grid>
                                    <Grid item>
                                        <Stack direction="row" alignItems="center" spacing={0}>
                                            <Button
                                                size="small"
                                                onClick={() => setSlot('month')}
                                                color={slot === 'month' ? 'primary' : 'secondary'}
                                                variant={slot === 'month' ? 'outlined' : 'text'}
                                            >
                                                Month
                                            </Button>
                                            <Button
                                                size="small"
                                                onClick={() => setSlot('week')}
                                                color={slot === 'week' ? 'primary' : 'secondary'}
                                                variant={slot === 'week' ? 'outlined' : 'text'}
                                            >
                                                Week
                                            </Button>
                                        </Stack>
                                    </Grid>
                                </Grid>
                                <MainCard content={false} sx={{ mt: 1.5 }}>
                                    <Box sx={{ pt: 1, pr: 2 }}>
                                        <IncomeAreaChart slot={slot} />
                                    </Box>
                                </MainCard>
                            </Grid>
                            <Grid item xs={12} md={5} lg={4}>
                                <Grid container alignItems="center" justifyContent="space-between">
                                    <Grid item>
                                        <Typography variant="h5">다운로드수</Typography>
                                    </Grid>
                                    <Grid item />
                                </Grid>
                                <MainCard sx={{ mt: 2 }} content={false}>
                                    <Box sx={{ p: 3, pb: 0 }}>
                                        <Stack spacing={2}>
                                            <Typography variant="h3" color="textSecondary">
                                                이번주 현황
                                            </Typography>
                                            <Typography variant="h6">총 {totalDownloads}건</Typography>
                                        </Stack>
                                    </Box>
                                    <MonthlyBarChart onDataFetched={handleTotalDownloads} />
                                </MainCard>
                            </Grid>

                            {/* row 3 */}
                            <Grid item xs={12} md={7} lg={8}>
                                <Grid container alignItems="center" justifyContent="space-between">
                                    <Grid item>
                                        <Typography variant="h5">미답변 문의사항</Typography>
                                    </Grid>
                                    <Grid item />
                                </Grid>
                                <MainCard sx={{ mt: 2 }} content={false}>
                                    <BbsTable />
                                </MainCard>
                            </Grid>
                            <Grid item xs={12} md={5} lg={4}>
                                <Grid container alignItems="center" justifyContent="space-between">
                                    <Grid item>
                                        <Typography variant="h5">접속 방법</Typography>
                                    </Grid>
                                    <Grid item />
                                </Grid>
                                <MainCard sx={{ mt: 2 }} content={false}>
                                    <ReportAreaChart />
                                </MainCard>
                            </Grid>
                        </Grid>


                        {/*<ChartToggle isDailyChart={isDailyChart} onToggle={handleChartToggle}/>*/}

                        {/*<div style={{width: 1000, height: 300}}>*/}
                        {/*    <ResponsiveContainer width="100%" height="100%">*/}
                        {/*        <BarChart*/}
                        {/*            width={500}*/}
                        {/*            height={300}*/}
                        {/*            data={data}*/}
                        {/*            margin={{*/}
                        {/*                top: 5,*/}
                        {/*                right: 30,*/}
                        {/*                left: 20,*/}
                        {/*                bottom: 5,*/}
                        {/*            }}*/}
                        {/*        >*/}
                        {/*            <CartesianGrid strokeDasharray="3 3"/>*/}
                        {/*            <XAxis dataKey="logDt"/>*/}
                        {/*            <YAxis/>*/}
                        {/*            <Tooltip content={<CustomTooltip/>}/>*/}
                        {/*            <Legend/>*/}
                        {/*            <Bar dataKey="사용자 접속현황" barSize={20} fill="#87CEFA"/>*/}
                        {/*        </BarChart>*/}
                        {/*    </ResponsiveContainer>*/}
                        {/*</div>*/}
                    </div>
                </div>
            </div>
        </div>
    );
}

export default EgovAdminDashboard;