//page to show all repots in the database with a link to the report page
import axiosInstance from '../../../src/axiosSecure';
import { useEffect, useState } from "react";
import toast from "react-hot-toast";
import { useRouter } from "next/router";
import Link from "next/link";
import { useSession } from "next-auth/react"
//const common = require('src/helpers/common');
import common from '../../../src/helpers/common';
import Layout from "../../../components/layout";
import ProtectedRoute from '../../../components/protectedRoute';
import { Location, Shift, UserRole, EventLog, EventType, EventLogType } from "@prisma/client";
import { set } from 'date-fns';


export default function EventLogList() {
    const [eventLogs, setEventLog] = useState([]);
    const [requestedAssignments, setRequestedAssignments] = useState([]);
    const router = useRouter();
    const { data: session } = useSession();

    const [locations, setLocations] = useState([]);
    const [showOpenRequests, setShowOpenRequests] = useState(false);

    useEffect(() => {
        const fetchLocations = async () => {
            try {
                const { data: eventLogsData } = await axiosInstance.get(`/api/data/prisma/eventLog?where={"type":"${EventLogType.AssignmentReplacementAccepted}"}
                &include={"publisher":{"select":{"firstName":true,"lastName":true}},"shift":{"include":{"publishers":{"select":{"firstName":true,"lastName":true}}}}}`);
                setEventLog(eventLogsData);

                const { data: shiftsData } = await axiosInstance.get(`/api/data/prisma/assignment?where={"publicGuid":{"not":"null"}}&include={"shift":{"include":{"publishers":{"select":{"firstName":true,"lastName":true}}}},"publisher":{"select":{"firstName":true,"lastName":true}}}`)
                setRequestedAssignments(shiftsData);

            } catch (error) {
                console.error(error);
            }
        };
        if (!locations.length) {
            fetchLocations();
        }
    }, []);
    return (
        <Layout>
            <ProtectedRoute allowedRoles={[UserRole.POWERUSER, UserRole.ADMIN, UserRole.USER, UserRole.EXTERNAL]}>

                <div className="h-5/6 grid place-items-start px-4 pt-8">
                    <div className="flex flex-col w-full px-4">
                        <h1 className="text-2xl font-bold text-center">Заявки за заместване</h1>
                        {/* <Link href="/cart/reports/report">
                            <button className="mt-4 bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded">
                                Добави нов отчет
                            </button>
                        </Link> */}
                        <div className="flex gap-2 mb-4">

                            <label className={`cursor-pointer px-4 py-2 rounded-full ${!showOpenRequests ? 'bg-blue-500 text-white' : 'bg-gray-200 text-gray-800'}`}>
                                <input type="radio" name="reportType" value="ServiceReport" onChange={() => setShowOpenRequests(false)} checked={!showOpenRequests} className="sr-only" />
                                Приети заявки
                            </label>
                            <label className={`cursor-pointer px-4 py-2 rounded-full ${showOpenRequests ? 'bg-blue-500 text-white' : 'bg-gray-200 text-gray-800'}`}>
                                <input type="radio" name="reportType" value="Experience" onChange={() => setShowOpenRequests(true)} checked={showOpenRequests} className="sr-only" />
                                Отворени заявки
                            </label>
                        </div>
                        <div className="mt-4 w-full overflow-x-auto">
                            <table className="w-full table-auto">
                                <thead>
                                    <tr>
                                        <th className="px-4 py-2 text-left">От</th>
                                        <th className="px-4 py-2 text-left">Дата</th>
                                        <th className="px-4 py-2 text-left">Смяна</th>
                                        <th className="px-4 py-2 text-left">Действия</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {!showOpenRequests && (eventLogs.map((event) => (
                                        <tr key={event.id}>
                                            <td className="border px-2 py-2">{event.publisher.firstName + " " + event.publisher.lastName}</td>
                                            <td className="border px-2 py-2">{common.getDateFormated(new Date(event.date))}</td>
                                            <td className="border px-2 py-2">{event.shift?.name}</td>
                                            <td className="border px-2 py-2">
                                                {event.content}
                                            </td>
                                            <td className="border px-4 py-2">
                                                <button
                                                    className="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded">
                                                    Изтрий
                                                </button>
                                            </td>
                                        </tr>
                                    ))
                                    )}
                                    {showOpenRequests && (requestedAssignments.map((assignment) => (
                                        <tr key={assignment.id}>
                                            <td className="border px-2 py-2">{assignment.publisher.firstName + " " + assignment.publisher.lastName}</td>
                                            <td className="border px-2 py-2">{new Date(assignment.shift.startTime).toLocaleString('bg')}</td>
                                            <td className="border px-2 py-2">
                                                {assignment.shift.publishers.map((publisher) => (
                                                    <div key={publisher.id}>{publisher.firstName + " " + publisher.lastName}</div>
                                                ))}
                                            </td>
                                            <td className="border px-4 py-2">
                                                <button
                                                    className="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded">
                                                    Изтрий
                                                </button>
                                            </td>
                                        </tr>
                                    ))
                                    )}
                                </tbody>
                            </table>
                        </div>
                    </div >
                </div >
            </ProtectedRoute >
        </Layout >
    );
}