import { Typography } from "@mui/material";
import { FC } from "react";
import { useTranslation } from "react-i18next";
import { toast } from "react-toastify";

import { Centroid } from "@/common/components/Centroid";
import { Loader } from "@/common/components/Loader";
import { useDialogStore } from "@/contexts/dialog/lib/useDialogStore";
import { PhotoModel } from "@/contracts/client.schemas";
import { useGetPhotoList } from "@/contracts/photos";

// import { useLazyFindPicturesForObjectQuery } from "../modules/pictures.api";

import { PhotoCard } from "./PhotoCard";
import styles from "./Photos.module.css";

interface Props {
	assetId: string;
}

export const Photos: FC<Props> = ({ assetId }) => {
	const { t } = useTranslation();
	const { data, isLoading, error, isError } = useGetPhotoList({
		AssetId: assetId,
	});
	const pushDialog = useDialogStore((x) => x.push);

	if (isLoading) {
		return (
			<Centroid>
				<Loader />
			</Centroid>
		);
	}

	if (isError) {
		toast.error((error as Error).message);
		return null;
	}

	if (!data) {
		return null;
	}

	const getCarouselId = () => {
		return `carousel-${assetId}`;
	};

	if (data.items.length === 0) {
		return (
			<Centroid>
				<Typography variant="h6">{t("thereAreNoPhotos")}</Typography>
			</Centroid>
		);
	}

	function handleItemClick(image: PhotoModel) {
		if (image.base64) {
			pushDialog({
				key: "photo",
				content: <PhotoCard photo={image} />,
			});
		}
	}

	return (
		<div id={getCarouselId()} className={styles.container}>
			{data.items.map((image, index) => (
				<div
					key={index}
					className={styles.item}
					onClick={() => handleItemClick(image)}
				>
					<img
						src={image.base64}
						alt={image.description || image.name}
						className={styles.image}
					/>
					<div className={styles.label}>{image.name}</div>
				</div>
			))}
		</div>
	);
};
