import { useState } from 'react';
import Layout from "../../../components/layout";
import ProtectedRoute from '../../../components/protectedRoute';
import { UserRole } from '@prisma/client';
import axiosServer from '../../../src/axiosServer';
import common from '../../../src/helpers/common';
import ShiftsList from '../../../components/publisher/ShiftsList';

import { monthNamesBG, GetTimeFormat, GetDateFormat } from "../../../src/helpers/const"
import { useSession, getSession } from 'next-auth/react';

export default function MySchedulePage({ assignments }) {

    const { data: session, status } = useSession();
    if (status === "loading") {
        return <div>Loading...</div>;
    }

    return (
        <Layout>
            <ProtectedRoute allowedRoles={[UserRole.ADMIN, UserRole.POWERUSER, UserRole.USER]}>
                <h1 className="text-3xl font-bold">Моите смени</h1>
                <div className="container mx-auto p-4">
                    {assignments && assignments.map((assignment) => (
                        <div className="flex items-center space-x-2 py-1" key={assignment.dateStr}>
                            <div className="font-bold flex-shrink-0 w-6 text-right">{assignment.dateStr + ":"}</div> {/*This is the column for the date. I've given it a fixed width (w-8) which you can adjust*/}
                            <div className="flex-grow flex">
                                <div className="flow space-x-2 bg-gray-200 rounded-lg shadow-md py-2 px-3" key={assignment.id}>
                                    <span>{GetTimeFormat(assignment.shift.startTime)} - {GetTimeFormat(assignment.shift.endTime)}</span>
                                    <button
                                        className={`text-sm text-white font-semibold px-2 rounded-lg shadow ${assignment.isConfirmed ? "bg-yellow-400 hover:bg-yellow-500" : "bg-red-400 hover:bg-red-500"}`}
                                        onClick={() => searchReplacement(assignment.id)}
                                    >
                                        Търси заместник
                                    </button>
                                    <button
                                        className="text-sm bg-green-400 hover:bg-green-500 text-white font-semibold px-2 rounded-lg shadow"
                                        onClick={() => AddToGoogleCalendar(assignment.id)}
                                    >
                                        Добави в календар
                                    </button>
                                </div>
                            </div>
                        </div>
                    ))}
                </div>
            </ProtectedRoute>
        </Layout>
    );
}

//get future assignments for the current user (session.user.id)

export const getServerSideProps = async (context) => {
    const session = await getSession(context);

    context.res.setHeader("Cache-Control", "s-maxage=1, stale-while-revalidate");

    if (!session) {
        return {
            redirect: {
                destination: '/auth/login', // Adjust the login path as needed
                permanent: false,
            },
        };
    }

    const prisma = common.getPrismaClient();
    const publisher = await prisma.publisher.findMany({
        where: {
            id: session.user.id,
            assignments: {
                some: {
                    shift: {
                        startTime: {
                            gte: new Date(),
                        },
                    },
                },
            },
        },
        include: {
            assignments: {
                include: {
                    shift: true,
                },
            },
        },
    });

    const assignments = publisher[0]?.assignments;

    const transformedAssignments = assignments.map(assignment => {
        if (assignment.shift && assignment.shift.startTime) {
            return {
                ...assignment,
                dateStr: assignment.shift.startTime.toLocaleDateString("bg-BG", { day: "numeric", month: "long" }),
                shift: {
                    ...assignment.shift,
                    startTime: assignment.shift.startTime.toISOString(),
                    endTime: assignment.shift.endTime.toISOString(),
                },
            };
        }
        return assignment;
    });



    return {
        props: { assignments: transformedAssignments }
    }
}

