import React, { useEffect, useState } from "react"
import { RequestService } from "libs/shared-services/vms/src/lib/request.service"
import { AlertMessages } from "@gtpl/shared-utils/alert-messages"
import './pages-visitor-management-visitor-components-visitor-request-form.css';
import Highdonut from '../../../../../dashboard/dashboard-components/factory-head-dashboard-grid/src/lib/donut';
import Highcolumn from '../../../../../dashboard/dashboard-components/factory-head-dashboard-grid/src/lib/column';
import { CardHeaderBody, DohountRequest, HighColumn } from "@gtpl/shared-models/common-models";
import { LineSeries } from "libs/shared-models/common-models/src/lib/dashboards/line-series";


class exportClassObj 
{
    visit_type : string;
    no_of_visitors : string;
}


export const VisitorDashboard = () => {
    const [visitorCount, setVisitorCount] = useState<any>({});
    const [requestCount, setRequestCount] = useState<any>({});
    const [visitTypeDetail, setVisitTypeDetail] = useState<exportClassObj[]>([]);
    const [monthWiseCount, setMonthWiseCount ] = useState<any>([]);
    const service = new RequestService();

    setInterval(function() {
        window.location.reload();
      }, 300000);
      
    useEffect(() => {
        visitor();
        requests();
        visitType();
        monthWiseVisitor();
    }, [])

    const visitor = () => {
        service.todayVisitors().then((res) => {
            console.log(res)
            if (res.status) {
                setVisitorCount(res.data[0]);
            } else {
                setVisitorCount([]);
            }
        }).catch(err => {
            AlertMessages.getErrorMessage(err.message);
            setVisitorCount([]);
        })
    }

    const requests = () => {
        service.todayRequests().then((res) => {
            console.log(res)
            if (res.status) {
                setRequestCount(res.data[0]);
            } else {
                setRequestCount([]);
            }
        }).catch(err => {
            AlertMessages.getErrorMessage(err.message);
            setRequestCount([]);
        })
    }

    const visitType = () => {
        service.visitorCount().then((res) => {
            console.log(res)
            if (res.status) {
                setVisitTypeDetail(res.data);
            } else {
                setVisitTypeDetail([]);
            }
        }).catch(err => {
            AlertMessages.getErrorMessage(err.message);
            setVisitTypeDetail([]);
        })
    }

    const monthWiseVisitor = () => {
        service.visitorMonthWiseCount().then((res) => {
            console.log(res)
            if (res.status) {
                setMonthWiseCount(res.data);
            } else {
                setMonthWiseCount([]);
            }
        }).catch(err => {
            AlertMessages.getErrorMessage(err.message);
            setMonthWiseCount([]);
        })
    }

    console.log(visitTypeDetail);
    console.log(typeof(visitTypeDetail[0]));
    console.log(visitTypeDetail[0]);
    console.log(visitTypeDetail[0]?.no_of_visitors);
    console.log(typeof(visitTypeDetail));
    // console.log(visitTypeDetail[0].visit_type);
    const openSoCardBody1 = new CardHeaderBody(visitTypeDetail[0]?.visit_type, visitTypeDetail[0]?.no_of_visitors);

    const openSoCardBody2 = new CardHeaderBody(visitTypeDetail[1]?.visit_type, visitTypeDetail[1]?.no_of_visitors);

    const doNutReq = new DohountRequest('Visitor Type Details', 'Visit Count', [openSoCardBody1, openSoCardBody2]);

    const finMonthTextMap = new Map<number, string>();
    finMonthTextMap.set(1, 'jan');
    finMonthTextMap.set(2, 'feb');
    finMonthTextMap.set(3, 'mar');
    finMonthTextMap.set(4, 'apr');
    finMonthTextMap.set(5, 'may');
    finMonthTextMap.set(6, 'jun');
    finMonthTextMap.set(7, 'july');
    finMonthTextMap.set(8, 'aug');
    finMonthTextMap.set(9, 'sep');
    finMonthTextMap.set(10, 'octo');
    finMonthTextMap.set(11, 'nov');
    finMonthTextMap.set(12, 'decm');

    const monthsNamesArray = new Set<string>();
    const monthVisitor: CardHeaderBody[] = [];
    for(const [monthNumber, month] of finMonthTextMap) {
        monthsNamesArray.add(month);
    }
    console.log(monthWiseCount)
    if (monthWiseCount.length > 0) {
        for (const monthsName of monthsNamesArray) {
            console.log(monthsName)
            console.log(monthWiseCount[0])
            console.log(monthWiseCount[0].Nov)
            const visitorCountVal = monthWiseCount[0][monthsName];
            monthVisitor.push(new CardHeaderBody('visitor Count', visitorCountVal));
            console.log(visitorCountVal);
        }
    }
    const lineSeriesEndVisitor = new LineSeries(monthVisitor);
    const highEndreaqest = new HighColumn('Month Wise Visitors', Array.from(monthsNamesArray), 'Total Number Of Visitors', [lineSeriesEndVisitor])

    return (
        <div>
            <div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between' }}>
                <div className="visitor-header">
                    Today's Visitors <br />
                    {visitorCount.no_of_visitors}
                </div >
                <div className="visitor-header">
                    Today's Check-Ins <br />
                    {visitorCount.check_in}
                </div >
                <div className="visitor-header">
                    Today's Check-outs <br />
                    {visitorCount.check_out}
                </div >
                <div className="visitor-header">
                    Today's Requests <br />
                    {requestCount.no_of_visitors}
                </div >
            </div>
            <br />
            <div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between' }}>
                <div className="donut">
                    <Highdonut doNutData={doNutReq} />
                </div>
                <div className="highcolumn">
                <Highcolumn columnData={highEndreaqest} />
                </div>
            </div>

        </div>
    )
}

export default VisitorDashboard;