import { Box } from "@mui/material";
import { FC } from "react";
import { TransformComponent, TransformWrapper } from "react-zoom-pan-pinch";

import { DialogDefaultHeader } from "@/contexts/dialog/ui/DialogDefaultHeader";
import { PhotoModel } from "@/contracts/client.schemas";
import { DialogContent } from "@/shared";

interface Props {
	photo: PhotoModel;
}

export const PHOTO_CARD_DIALOG_KEY = "photo-card";

export const PhotoCard: FC<Props> = ({ photo }) => {
	return (
		<DialogContent>
			<DialogDefaultHeader />
			<Box
				sx={{
					height: "75vh",
					overflow: "hidden",
					display: "flex",
					alignItems: "stretch",
					justifyContent: "stretch",
				}}
			>
				<TransformWrapper
					centerOnInit
					centerZoomedOut
					minScale={0.25}
					maxScale={3}
				>
					<TransformComponent>
						<img src={photo.base64} alt={photo.name} />
					</TransformComponent>
				</TransformWrapper>
			</Box>
		</DialogContent>
	);
};
