import { mediaStore } from "@shared";
import { useEffect } from "react";
import { useParams } from "react-router-dom";
import { MediaViewer } from "@widgets";
import { observer } from "mobx-react-lite";
import { Download } from "lucide-react";
import { Button } from "@mui/material";

export const MediaPreviewPage = observer(() => {
  const { id } = useParams();
  const { oneMedia, getOneMedia } = mediaStore;

  useEffect(() => {
    getOneMedia(id!);
  }, []);

  return (
    <div className="w-full flex flex-col justify-center items-center gap-4">
      <div className="w-full flex flex-col justify-center items-center gap-4">
        <div className="flex justify-center items-center max-w-[60%]">
          <MediaViewer media={oneMedia!} />
        </div>

        {oneMedia && (
          <div className="flex-1 flex flex-col items-center gap-4 bg-[#998879] p-4 rounded-md">
            <p className="text-white text-center">
              Чтобы скачать файл, нажмите на кнопку ниже
            </p>
            <Button
              variant="contained"
              color="primary"
              startIcon={<Download size={16} />}
              component="a"
              href={`${
                import.meta.env.VITE_KRBL_MEDIA
              }${id}/download?token=${localStorage.getItem("token")}`}
              target="_blank"
            >
              Скачать
            </Button>
          </div>
        )}
      </div>
    </div>
  );
});