import { Head, Link, router } from '@inertiajs/react';
import { Button } from '@/components/ui/button';
import AppLayout from '@/Layouts/AppLayout.jsx';
import { Card, CardContent, CardFooter, CardHeader, CardTitle } from '@/components/ui/card';
import { Star } from 'lucide-react';
import { Badge } from '@/components/ui/badge';

import { BreadcrumbItem, BreadcrumbPage, BreadcrumbSeparator } from "@/components/ui/breadcrumb";
import { useToast } from "@/hooks/use-toast.js";
import { useState } from "react";

export default function Favourites({ auth, favourites }) {

    const { toast } = useToast();
    const [stateFavourites, setStateFavourites] = useState(favourites);

    const favouriteOnClickHandler = (pathword) => {
        axios.post(route('comics.postFavourite'), { pathword: pathword }).then(res => {
            setStateFavourites(stateFavourites.filter(f => f.pathword !== pathword));
        });

        toast({
            title: "All set",
            description: `The comic is now removed from your favorite list.`,
        });
    }

    const FavouriteCard = (props) => {
        return (
            <Card>
                <CardContent className="flex gap-2">
                    <div className="basis-1/4 pt-3">
                        <div className="relative">
                            <Link href={ `/comic/${ props.pathword }` }>
                                <img className="block w-100 min-w-full object-fill" src={ "/image/" + btoa(props.cover) }
                                     alt={ props.name } />
                            </Link>
                            <Button className="absolute bottom-0 right-0"
                                    onClick={ () => favouriteOnClickHandler(props.pathword) } size="icon">
                                <Star fill='yellow' />
                            </Button>
                        </div>
                    </div>
                    <div className="basis-3/4">
                        <CardHeader>
                            <CardTitle><Link href={ `/comic/${ props.pathword }` }>{ props.name }</Link></CardTitle>
                            <div className="flex gap-2 items-end justify-between">
                                <p>
                                    { props.authors.map(a => <Badge key={ a.path_word } variant="outline"><Link>{ a.name }</Link></Badge>) }
                                </p>
                                <p className="text-right text-sm">
                                    Updated: { props.upstream_updated_at }
                                </p>
                            </div>
                            <div className="pt-2">{ props.description }</div>
                        </CardHeader>
                        <CardFooter className="relative">
                            <Button className="w-full" asChild>
                                <Link href={ route('comics.read', [props.pathword, props.metadata.comic.last_chapter.uuid])}>
                                    Read [{ props.metadata.comic.last_chapter.name }]
                                </Link>
                            </Button>
                        </CardFooter>
                    </div>
                </CardContent>
            </Card>
        );
    }

    return (
        <AppLayout auth={ auth } header={
            <>
                <BreadcrumbSeparator />
                <BreadcrumbItem>
                    <BreadcrumbPage>Favourites</BreadcrumbPage>
                </BreadcrumbItem>
            </>
        }>
            <Head>
                <title>Favourites</title>
            </Head>
            <div className="p-3 pt-1 grid lg:grid-cols-2 sm:grid-cols-1 gap-2">
                { stateFavourites.map((favourite, i) => <FavouriteCard key={ i } {...favourite } /> ) }
            </div>
        </AppLayout>
    );
}
