import { Box } from "@mui/material";
import { TOKEN_KEY } from "@providers";
import { ReactPhotoSphereViewer } from "react-photo-sphere-viewer";
import { ModelViewer } from "./ModelViewer";

export interface MediaData {
	filename?: string;
	id: string | number;
	media_name?: string;
	media_type: number;
}

export function MediaView({media} : Readonly<{media?: MediaData}>) {
	const token = localStorage.getItem(TOKEN_KEY);
	return (
		<Box
			sx={{maxHeight: "50vh", height: "100%", width: "100%", display: "flex", justifyContent: "center"}}		
		>
			{media?.media_type === 1 && (
			<img
				src={`${import.meta.env.VITE_KRBL_MEDIA}${
				media?.id
				}/download?token=${token}`}
				alt={media?.filename}
				style={{
				maxWidth: "100%",
				height: "100%",
				objectFit: "contain",
				borderRadius: 8,
				}}
			/>
			)}

			{media?.media_type === 2 && (
			<video
				src={`${import.meta.env.VITE_KRBL_MEDIA}${
				media?.id
				}/download?token=${token}`}
				style={{

				objectFit: "contain",
				borderRadius: 30,
				}}
				controls
				autoPlay
				muted
			/>
			)}
			{media?.media_type === 3 && (
			<img
				src={`${import.meta.env.VITE_KRBL_MEDIA}${
				media?.id
				}/download?token=${token}`}
				alt={media?.filename}
				style={{
				maxWidth: "100%",
				height: "100%",
				objectFit: "contain",
				borderRadius: 8,
				}}
			/>
			)}
			{media?.media_type === 4 && (
			<img
				src={`${import.meta.env.VITE_KRBL_MEDIA}${
				media?.id
				}/download?token=${token}`}
				alt={media?.filename}
				style={{
				maxWidth: "100%",
				height: "100%",
				objectFit: "contain",
				borderRadius: 8,
				}}
			/>
			)}

			{media?.media_type === 5 && (
			<ReactPhotoSphereViewer
				src={`${import.meta.env.VITE_KRBL_MEDIA}${
				media?.id
				}/download?token=${token}`}
				width={"100%"}
				height={"100%"}
			/>
			)}

			{media?.media_type === 6 && (
			<ModelViewer
				fileUrl={`${import.meta.env.VITE_KRBL_MEDIA}${
				media?.id
				}/download?token=${token}`}
			/>
			)}
		</Box>
	)
}