'use client'

import DetailPresenceCardComponent from "@/components/DetailPresenceCardComponent";
import LoadingComponent from "@/components/LoadingComponent";
import axiosInstance from "@/lib/axios";
import { DatePicker } from "antd";
import { useSession } from "next-auth/react"
import { useEffect, useState } from "react";
import dayjs from "dayjs";
import LoadComponent from "@/components/LoadComponent";
import ExportExcelButton from "@/components/ExportExcelButton";

export default function attendance(){
    const {data : session} = useSession()
    const [dataAbsenHistory, setDataAbsenHistory] = useState([]);
    const [selectedMonth, setSelectedMonth] = useState(dayjs());
    const [loadingAbsenHistory, setLoadingAbsenHistory] = useState(true);
    
    useEffect(() => {
        if (session?.accessToken) {
        getDataAbsenHistory(session.accessToken, 'all');
        }
    }, [session, selectedMonth]);

    const getDataAbsenHistory = async (token, date) => {
        setLoadingAbsenHistory(true);

        try {
        const response = await axiosInstance.get(`/user/get-absen-history-parent?limit=31&page=1&monthyear=${date}`, {
            headers: {
            Authorization: `Bearer ${token}`,
            },
        });

        const fetchedData = response?.data?.data ?? []; 
        setDataAbsenHistory(fetchedData.data);

        } catch (error) {
        console.error('Gagal mengambil data riwayat absen:', error);
        }
        setLoadingAbsenHistory(false);
    };

    const onChange = (date, dateString) => {
        setSelectedMonth(date);
    };
    
    return(
        <div className="min-h-screen pb-20">
            <div className="p-4 card-head">
                Kehadiran
            </div>
            <div className="p-4">
                    
                <DatePicker onChange={onChange} picker="month"
                      format={"MMMM YYYY"}
                      placeholder="Pilih Bulan" value={selectedMonth} 
                />
                <div className="mt-4">
                    <ExportExcelButton data={dataAbsenHistory}/>
                </div>
                    
                {loadingAbsenHistory ? 
                    <div className="mt-4">
                        <LoadComponent />
                    </ div> : 
                    dataAbsenHistory.map((item) => (
                        <DetailPresenceCardComponent
                            key={item.id}
                            date={item.date}
                            presences={item.presences}
                        />
                    ))}
            </div>
        </div>
    )
}