//next.js page to show all locatons in the database with a link to the location page
import { Availability, UserRole } from "@prisma/client";
import { format } from "date-fns";
import { useRouter } from "next/router";
import { useState } from 'react';
import Layout from "../../../components/layout";
import axiosInstance from '../../../src/axiosSecure';
import axiosServer from '../../../src/axiosServer';
import ProtectedRoute from '../../../components/protectedRoute';
import AvCalendar from '../../../components/calendar/avcalendar';


interface IProps {
  initialItems: Availability[];
  id: string;
}

// export default function AvPage({} : IProps) {
export default function AvPage({ initialItems, id }: IProps) {
  const router = useRouter();
  // items.forEach(item => {
  //   item.publisher =  prisma.publisher.findUnique({where: {id: item.publisherId}});
  // });

  const [items, set] = useState(initialItems);

  const events = initialItems?.map(item => ({
    id: item.id,
    title: item.name,
    date: new Date(item.startTime),
    start: new Date(item.startTime),
    end: new Date(item.endTime),
    isActive: item.isActive,
    publisherId: item.publisher.id,
    dayOfMonth: item.dayOfMonth,
    dayOfWeek: item.dayOfWeek,
  }));

  const render = () => {
    console.log("showing " + initialItems?.length + " availabilities");
    if (initialItems?.length === 0) return <h1>No Items</h1>;
    return ( //AvailabilityList(items));    
      <>
        <table className="min-w-full">
          <thead className="border-b">
            <tr>
              <th scope="col" className="text-sm font-medium text-gray-900 px-6 py-4 text-left">
                #
              </th>
              <th scope="col" className="text-sm font-medium text-gray-900 px-6 py-4 text-left">
                Publisher
              </th>
              <th scope="col" className="text-sm font-medium text-gray-900 px-6 py-4 text-left">
                Name
              </th>
              <th scope="col" className="text-sm font-medium text-gray-900 px-6 py-4 text-left">
                Weekday
              </th>
              <th scope="col" className="text-sm font-medium text-gray-900 px-6 py-4 text-left">
                From
              </th>
              <th scope="col" className="text-sm font-medium text-gray-900 px-6 py-4 text-left">
                To
              </th>
            </tr>
          </thead>
          <tbody>
            {initialItems?.map((item: Availability) => (
              <tr key={item.id} className={item.isActive ? "" : "text-gray-300"}>
                <td className="px-6 py-4 whitespace-nowrap ">
                  {item.id} {item.isActive}
                </td>
                <td className="px-6 py-4 whitespace-nowrap">
                  {item.publisher.lastName}, {item.publisher.firstName}
                </td>
                <td className="px-6 py-4 whitespace-nowrap">
                  {item.name}
                </td>
                <td className="px-6 py-4 whitespace-nowrap">
                  {item.dayofweek}
                </td>
                <td className="px-6 py-4 whitespace-nowrap">
                  {format(new Date(item.startTime), "HH:mm")}
                </td>
                <td className="px-6 py-4 whitespace-nowrap">
                  {format(new Date(item.endTime), "HH:mm")}
                </td>
                <td>
                  <button className="btn text-gray-700"
                    onClick={() => router.push(`/cart/availabilities/edit/${item.id}`)}                  >
                    Edit
                  </button>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </>
    )
  };

  return <Layout>
    <ProtectedRoute allowedRoles={[UserRole.ADMIN]}>

      <AvCalendar publisherId={id} events={events} />
      <div className="max-w-7xl mx-auto">
        <div>
          {render()}
        </div>
        {/* <div className="flex justify-center">
        <a href="/cart/availabilities/new" className="btn">
          New availability
        </a>
      </div> */}
      </div></ProtectedRoute>
  </Layout>
}

import { getSession } from "next-auth/react";

import { serverSideAuth } from '../../../components/protectedRoute'; // Adjust the path as needed

export const getServerSideProps = async (context) => {
  const axios = await axiosServer(context);
  const auth = await serverSideAuth({
    req: context.req,
    allowedRoles: [/* ...allowed roles... */]
  });
  // const prisma = new PrismaClient()
  //get current user role from session
  const session = await getSession(context);
  if (!session) { return { props: {} } }

  const role = session?.user.role;
  console.log("server role: " + role);
  var queryUrl = process.env.PUBLIC_URL + "/api/data/availabilities?select=id,name,isActive,dayofweek,dayOfMonth,startTime,endTime,publisher.firstName,publisher.lastName,publisher.id";
  if (role === UserRole.USER || context.query.my) {
    queryUrl += `&where={"publisherId":"${session?.user.id}"}`;
  } else if (role == UserRole.ADMIN) {
    if (context.query.id) {
      queryUrl += `&where={"publisherId":"${context.query.id}"}`;
    } else {
      queryUrl += `&where={"isActive":true}`;
    }
  }
  var resp = await axios.get(
    queryUrl
    // process.env.PUBLIC_URL + "/api/data/availabilities?include=publisher",
    , { decompress: true });
  var items = resp.data;
  console.log("got " + items.length + " availabilities");
  return {
    props: {
      initialItems: items,
      id: context.query.id || session?.user.id || null,
    },
  };
};