"use client";

import {
	Tabs,
	Tab,
	Card,
	CardBody,
	Divider,
	Image,
	Select,
	SelectItem,
} from "@nextui-org/react";
import { FaRegThumbsUp, FaRegStar } from "react-icons/fa";
import Link from "next/link";
import { useState } from "react";

import MangaChapters from "./chapterPages";

const MangaDescriptionTabs = ({ data }) => {
	const [pages, setPages] = useState(<></>);

	async function get_pages(id) {
		setPages(<p className="text-center">Loading...</p>);
		const data = await MangaChapters(id);
		setPages(data);
	}

	return (
		<div className="flex w-full flex-col">
			<Tabs aria-label="Options">
				<Tab key="description" title="Description">
					<Card shadow="sm">
						<CardBody
							dangerouslySetInnerHTML={{
								__html: data.description,
							}}
						></CardBody>
					</Card>
				</Tab>
				<Tab key="details" title="Details">
					<Card shadow="sm">
						<CardBody>
							<h4>
								<strong>Status</strong>:{" "}
								<span>{data.status || "not sure"}</span>
							</h4>
							<h4>
								<strong>Type</strong>:{" "}
								<span>{data.type || "not sure"}</span>
							</h4>
							<h4>
								<strong className="text-green-400">
									Started on
								</strong>
								:{" "}
								<span>
									{data.startDate.day}-{data.startDate.month}-
									{data.startDate.year}
								</span>
							</h4>
							<h4>
								<strong className="text-red-400">
									Ended on
								</strong>
								:{" "}
								<span>
									{data.endDate.day}-{data.endDate.month}-
									{data.endDate.year}
								</span>
							</h4>
							<div className="flex items-center">
								<section className="flex items-center">
									<FaRegThumbsUp />
									<p className="ml-1">{data.popularity}</p>
								</section>
								<Divider orientation="vertical" />
								<section className="ml-2 flex items-center">
									<FaRegStar />
									<p className="ml-1">
										{Number(data.rating) / 10}
									</p>
								</section>
							</div>
						</CardBody>
					</Card>
				</Tab>
				<Tab key="recommendations" title="Recommendation">
					<Card shadow="sm">
						<CardBody>
							{data.recommendations &&
								data.recommendations.length > 0 &&
								data.recommendations.map((item, index) => (
									<Link
										key={index}
										href={`/manga/${item.id}`}
									>
										<Card
											isPressable
											isHoverable
											shadow="sm"
											className="mb-2 flex w-full flex-row items-center"
										>
											<Image
												width={120}
												src={item.image}
												className="p-1"
												shadow="lg"
												isBlurred
											/>
											<CardBody>
												<p className="text-xl">
													{item.title.english ||
														item.title.romaji}
												</p>
											</CardBody>
										</Card>
									</Link>
								))}
						</CardBody>
					</Card>
				</Tab>
				<Tab key="chapter" title="Chapter">
					<Card shadow="sm" className="p-2">
						<Select
							className="w-full lg:max-w-md"
							label="Select chapter"
						>
							{data.chapters &&
								data.chapters.length > 0 &&
								data.chapters.map((item, index) => {
									if (item.pages > 0) {
										return (
											<SelectItem
												key={index}
												onClick={async () =>
													await get_pages(item.id)
												}
												textValue={item.title}
											>
												{item.title} -{" "}
												{item.chapterNumber}
											</SelectItem>
										);
									} else {
										return;
									}
								})}
						</Select>
						<CardBody>
							<div className="w-full">{pages}</div>
						</CardBody>
					</Card>
				</Tab>
			</Tabs>
		</div>
	);
};

export default MangaDescriptionTabs;