import { useState } from 'react';
import { Head, Link, router } from '@inertiajs/react';
import { Plus, Star, ArrowDownNarrowWide, ArrowUpNarrowWide, ChevronsLeft, ChevronsRight, Trash2 } from 'lucide-react';

import AppLayout from '@/Layouts/AppLayout.jsx';

import { Badge } from "@/components/ui/badge";
import { BreadcrumbItem, BreadcrumbPage, BreadcrumbSeparator } from '@/components/ui/breadcrumb';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
import { useToast } from '@/hooks/use-toast';

export default function Chapters({ auth, comic, chapters, histories, offset }) {

    const [group, setGroup] = useState('default');
    const [favourites, setFavourites] = useState(auth.user.favourites);
    const [ascending, setAscending] = useState(true);

    const { toast } = useToast();

    const favouriteOnClickHandler = (pathword) => {
        axios.post(route('comics.postFavourite'), { pathword: pathword }).then(res => {
            setFavourites(res.data);
            toast({
                title: "All set",
                description: `${comic.comic.name} is now in / remove your favorite list.`,
            });
        });
    }

    const removeAllHistoriesOnClickHandler = (pathword) => {
        router.visit(route('comics.destroyHistory', { pathword: pathword }), {
            method: 'DELETE',
            replace: false,
            preserveScroll: true,
            preserveState: true,
            showProgress: false,
            only: ['histories'],
            onSuccess: () => {
                toast({
                    title: "All set",
                    description: `All histories have been removed.`,
                });
            }
        });
    }

    const groupOnClickHandler = (pathword) => {
        router.get(`/comic/${ comic.comic.path_word }?group=${ pathword }`, {}, {
            only: ['chapters'],
            preserveState: true,
            onSuccess: () => {
                setGroup(pathword);
                setAscending(true);
            }
        });
    }

    const ComicChapterLink = (props) => {
        const isNew = Date.now() - Date.parse(props.datetime_created) < 6.048e+8;
        const isRead = histories.includes(props.uuid);

        return (
            <TooltipProvider>
                <Tooltip>
                    <TooltipTrigger asChild>
                        <Button size="sm" variant="outline" asChild className={ isRead ? 'bg-gray-200 hover:bg-gray-300 dark:bg-slate-800 dark:hover:bg-slate-700' : '' }>
                            <Link className="relative" href={ `/comic/${ comic.comic.path_word }/${ props.uuid }` }>
                                { props.name }
                                { isNew && <Plus size={ 16 } className="text-xs absolute right-0 top-0" /> }
                            </Link>
                        </Button>
                    </TooltipTrigger>
                    <TooltipContent>
                        <p>Updated: { props.datetime_created }</p>
                    </TooltipContent>
                </Tooltip>
            </TooltipProvider>
        );
    }

    const toggleAscending = (e) => {
        setAscending(!ascending);
    }

    return (
        <AppLayout auth={ auth } header={
            <>
                <span className="hidden lg:block"><BreadcrumbSeparator /></span>
                <BreadcrumbItem>
                    <BreadcrumbPage>{ comic.comic.name }</BreadcrumbPage>
                </BreadcrumbItem>
            </>
        }>
            <Head>
                <title>{ comic.comic.name }</title>
            </Head>
            <div className="p-3 pt-1">
                <Card>
                    <CardHeader>
                        <CardTitle className="flex flex-row content-end items-center">
                            <Button onClick={ () => favouriteOnClickHandler(comic.comic.path_word) } size="icon" variant="ghost">
                                <Star fill={ favourites.includes(comic.comic.path_word) ? 'yellow': 'white' } />
                            </Button>
                            <span>{ comic.comic.name }</span>
                        </CardTitle>
                    </CardHeader>
                    <CardContent className="flex justify-start justify-items-stretch content-start items-start gap-5 flex-wrap">
                        <div className="basis-full lg:basis-2/12">
                            <img className="block object-fill w-full" src={ "/image/" + btoa(comic.comic.cover) }
                                 alt={ comic.comic.name } />
                        </div>
                        <div className="basis-full lg:basis-9/12">
                            <table className="table-fixed w-full text-sm">
                                <tbody>
                                    <tr>
                                        <td className="text-right w-24 pr-3">Alias</td>
                                        <td>{ comic.comic.alias }</td>
                                    </tr>
                                    <tr>
                                        <td className="text-right pr-3">Status</td>
                                        <td>
                                            { comic.comic.region.display } / { comic.comic.status.display }
                                        </td>
                                    </tr>
                                    <tr>
                                        <td className="text-right pr-3">Category</td>
                                        <td>
                                            { comic.comic.theme.map(t =>
                                                <Badge key={ t.path_word } className="m-2" variant="outline">
                                                    <Link href={ route("comics.index", { tag: t.path_word }) }>{ t.name }</Link>
                                                </Badge>
                                            ) }
                                        </td>
                                    </tr>
                                    <tr>
                                        <td className="text-right pr-3">Authors</td>
                                        <td>
                                            { comic.comic.author.map(a => (
                                                <Badge key={ a.path_word } className="m-2" variant="outline">
                                                    <Link href={ route('comics.author', [a.path_word]) }>{ a.name }</Link>
                                                </Badge>
                                            ) ) }
                                        </td>
                                    </tr>
                                    <tr>
                                        <td className="text-right pr-3">Description</td>
                                        <td>{ comic.comic.brief }</td>
                                    </tr>
                                    <tr>
                                        <td className="text-right pr-3">Updated At</td>
                                        <td>
                                            <Link href={ route('comics.read', [comic.comic.path_word, comic.comic.last_chapter.uuid])}>
                                                { comic.comic.datetime_updated } - { comic.comic.last_chapter.name }
                                            </Link>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </CardContent>
                    <CardContent>
                        <Tabs defaultValue={ group } className="w-full" onValueChange={ (e) => groupOnClickHandler(e)} >
                            <div className="flex">
                                <TabsList className={ `grid w-full grid-cols-${ Object.entries(comic.groups).length } ` }>
                                    { Object.entries(comic.groups).map((g, i) => (
                                        <TabsTrigger key={ g[1].path_word } value={ g[1].path_word }>
                                            { g[1].name }
                                            <Badge key={ g[1].path_word } className="ml-2" variant="outline">
                                                { g[1].count }
                                            </Badge>
                                        </TabsTrigger>
                                    ) ) }
                                </TabsList>
                                <div className="flex justify-end">
                                    <TooltipProvider>
                                        <Tooltip>
                                            <TooltipTrigger asChild>
                                                <Button variant="link" size="icon" onClick={ () => toggleAscending() }>
                                                    { ascending ? <ArrowDownNarrowWide  /> : <ArrowUpNarrowWide /> }
                                                </Button>
                                            </TooltipTrigger>
                                            <TooltipContent>
                                                <p>Set order as { ascending ? 'Descending' : 'Ascending' }</p>
                                            </TooltipContent>
                                        </Tooltip>
                                    </TooltipProvider>

                                    <TooltipProvider>
                                        <Tooltip>
                                            <TooltipTrigger asChild>
                                                <Button variant="link" size="icon" onClick={ () => removeAllHistoriesOnClickHandler(comic.comic.path_word) }>
                                                    <Trash2 />
                                                </Button>
                                            </TooltipTrigger>
                                            <TooltipContent>
                                                <p>Remove all histories for this comic</p>
                                            </TooltipContent>
                                        </Tooltip>
                                    </TooltipProvider>
                                </div>
                            </div>
                            <TabsContent value={ group }>
                                <div
                                    className="w-full grid grid-cols-1 md:grid-cols-2 lg:grid-cols-6 2xl:grid-cols-12 gap-1">
                                    { (chapters.total > chapters.limit && chapters.offset > 0) && (
                                        <Button size="sm" variant="outline" asChild>
                                            <Link href="?" only={['chapters', 'offset']} headers={{ offset: parseInt(chapters.offset) - chapters.limit }}>
                                                <ChevronsLeft /> Prev
                                            </Link>
                                        </Button>
                                    ) }
                                    { chapters.list.sort((a, b) => ascending ? (a.index - b.index) : (b.index - a.index)).map(c => (
                                        <ComicChapterLink key={ c.uuid } { ...c } />
                                    ) ) }
                                    { (chapters.total > chapters.limit && chapters.total > chapters.offset) && (
                                        <Button size="sm" variant="outline" asChild>
                                            <Link href="?" only={['chapters', 'offset']} headers={{ offset: parseInt(chapters.offset) + chapters.limit }}>
                                                Next <ChevronsRight />
                                            </Link>
                                        </Button>
                                    ) }
                                </div>
                            </TabsContent>
                        </Tabs>
                    </CardContent>
                </Card>
            </div>
        </AppLayout>
    );
}
