import { Box } from "@mui/material";

import { ReactPhotoSphereViewer } from "react-photo-sphere-viewer";
import { ThreeView } from "./ThreeView";

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

export function MediaViewer({
  media,
  className,
}: Readonly<{ media?: MediaData; className?: string }>) {
  const token = localStorage.getItem("token");
  return (
    <Box
      sx={{
        width: "100%",
        height: "100%",
        display: "flex",
        flexGrow: 1,
        justifyContent: "center",
      }}
      className={className}
    >
      {media?.media_type === 1 && (
        <img
          src={`${import.meta.env.VITE_KRBL_MEDIA}${
            media?.id
          }/download?token=${token}`}
          alt={media?.filename}
          style={{
            width: "100%",
            height: "100%",
            objectFit: "cover",
          }}
        />
      )}

      {media?.media_type === 2 && (
        <video
          src={`${import.meta.env.VITE_KRBL_MEDIA}${
            media?.id
          }/download?token=${token}`}
          style={{
            height: "100%",
            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={{
            width: "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={{
            width: "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 && (
        <ThreeView
          fileUrl={`${import.meta.env.VITE_KRBL_MEDIA}${
            media?.id
          }/download?token=${token}`}
          height="100%"
        />
      )}
    </Box>
  );
}