import React from "react";
import { Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import { BusRequest, QuotationStatus } from "@/lib/types/BusRequest";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { formatDate } from "@/lib/utils";
import Link from "next/link";
import { Badge } from "@/components/ui/badge";

// Take in parameters that contains data
//
interface OrdersTableProps {
    bookings: BusRequest[];
}

function getBadgeVariant(status: QuotationStatus | undefined): "default" | "secondary" | "destructive" | "outline" {
    switch (status) {
        case QuotationStatus.Accepted:
            return "default";
        case QuotationStatus.Declined:
            return "destructive";
        case QuotationStatus.Pending:
            return "secondary";
        default:
            return "outline";
    }
}


export default async function OrdersTable({ bookings }: OrdersTableProps) {
    return (
        <Card className="w-full">
            <CardHeader className="flex flex-col sm:flex-row items-center justify-between space-y-2 sm:space-y-0">
                <CardTitle className="text-2xl font-bold">Orders List</CardTitle>
            </CardHeader>

            <CardContent>
                <Table>
                    <TableCaption>End of page</TableCaption>
                    <TableHeader>
                        <TableRow>
                            <TableHead>Name</TableHead>
                            <TableHead>Contact</TableHead>
                            <TableHead>Bus Type</TableHead>
                            <TableHead>Travel Date</TableHead>
                            <TableHead>Travel Time</TableHead>
                            <TableHead>Quotation Status</TableHead>
                        </TableRow>
                    </TableHeader>
                    <TableBody>
                        {bookings.map((booking) => (
                            <TableRow
                                key={booking.$id}
                                className="hover:bg-primary-light hover:cursor-pointer"
                            >
                                <TableCell>
                                    <Link
                                        href={`/dashboard/orders/${booking.$id}`}
                                        passHref
                                    >
                                        {booking.name}
                                    </Link>
                                </TableCell>
                                <TableCell>
                                    <Link
                                        href={`/dashboard/orders/${booking.$id}`}
                                        passHref
                                    >
                                        {booking.email}, {booking.contactNumber}
                                    </Link>
                                </TableCell>
                                <TableCell>
                                    <Link
                                        href={`/dashboard/orders/${booking.$id}`}
                                        passHref
                                    >
                                        {booking.busType}
                                    </Link>
                                </TableCell>
                                <TableCell>
                                    <Link
                                        href={`/dashboard/orders/${booking.$id}`}
                                        passHref
                                    >
                                        {formatDate(booking.travelDate)}
                                    </Link>
                                </TableCell>
                                <TableCell>
                                    <Link
                                        href={`/dashboard/orders/${booking.$id}`}
                                        passHref
                                    >
                                        {booking.travelTime}
                                    </Link>
                                </TableCell>
                                <TableCell>
                                    <Link
                                        href={`/dashboard/orders/${booking.$id}`}
                                        passHref
                                    >
                                        {booking.quotationStatus ? (
                                            <Badge variant={getBadgeVariant(booking.quotationStatus)}>
                                                {booking.quotationStatus}
                                            </Badge>
                                        ) : (
                                            "-"
                                        )}
                                    </Link>
                                </TableCell>
                            </TableRow>
                        ))}
                    </TableBody>
                </Table>
            </CardContent>
        </Card>
    );
}