import { useState } from 'react';
import { Head, Link, router } from '@inertiajs/react';
import AppLayout from '@/Layouts/AppLayout.jsx';

import { DateTime } from "luxon";

import { BreadcrumbItem, BreadcrumbPage, BreadcrumbSeparator } from "@/components/ui/breadcrumb";
import { Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import { Button } from "@/components/ui/button.jsx";

export default function Histories({ auth, histories }) {

    const deleteButtonOnClickHandler = () => {
        router.visit(route('comics.patchHistories'), {
            data: (ids.length > 0) ? { ids: ids } : { ids: 'all' },
            method: "PATCH",
            only: ['histories'],
            onSuccess: data => {
                toast({
                    title: "All set",
                    description: `The histories has been deleted.`,
                });
            }
        });
    }

    const removeDuplicatedButtonOnClickHandler = () => {
        router.visit(route('comics.destroyHistories'), {
            data: (ids.length > 0) ? { ids: ids } : { ids: 'all' },
            method: "DELETE",
            only: ['histories'],
            onSuccess: data => {
                toast({
                    title: "All set",
                    description: `The duplicated records has been deleted.`,
                });
            }
        });
    }

    return (
        <AppLayout auth={ auth } header={
            <>
                <BreadcrumbSeparator className="hidden lg:block" />
                <BreadcrumbItem>
                    <BreadcrumbPage>Histories</BreadcrumbPage>
                </BreadcrumbItem>
            </>
        }>
            <Head>
                <title>Histories</title>
            </Head>
            <div className="p-3 pt-1 w-[90%] mx-auto">
                <div className="flex justify-end gap-2">
                    <Button size="sm" asChild>
                        <Link href="?group=">
                            Group by Chapter
                        </Link>
                    </Button>
                </div>
                <Table>
                    <TableHeader>
                        <TableRow>
                            <TableHead>Comic</TableHead>
                            <TableHead>Chapter</TableHead>
                            <TableHead>Read at</TableHead>
                        </TableRow>
                    </TableHeader>
                    <TableBody>
                        { histories.map((comic, i) => comic.histories.map((record, j) => (
                            <TableRow key={ j }>
                                { (j === 0) && <TableCell className="w-[40%]" rowSpan={ comic.histories.length }>
                                    <Link href={ route('comics.chapters', comic.comic.comic_pathword) }>
                                        { comic.comic.comic_name }
                                    </Link>
                                </TableCell> }
                                <TableCell>
                                    <Link href={ route('comics.read', [comic.comic.comic_pathword, record.chapter_uuid]) }>
                                        { record.chapter_name }
                                    </Link>
                                </TableCell>
                                <TableCell>
                                    { record.read_at }
                                </TableCell>
                            </TableRow>
                        ) ) ) }
                    </TableBody>
                </Table>
            </div>
        </AppLayout>
    );
}
