import { Stack, Typography, Box, Button } from "@mui/material";
import { useShow } from "@refinedev/core";
import { Show, TextFieldComponent as TextField } from "@refinedev/mui";
import { MEDIA_TYPES } from "@lib";
import { TOKEN_KEY } from "@providers";
import { MediaData, MediaView } from "@ui";

export const MediaShow = () => {
  const { query } = useShow({});
  const { data, isLoading } = query;

  const record = data?.data;
  const token = localStorage.getItem(TOKEN_KEY);

  const fields = [
    // {label: 'Название файла', data: 'filename'},
    { label: "Название", data: "media_name" },
    {
      label: "Тип",
      data: "media_type",
      render: (value: number) =>
        MEDIA_TYPES.find((type) => type.value === value)?.label || value,
    },
    // {label: 'ID', data: 'id'},
  ];

  return (
    <Show isLoading={isLoading}>
      <Stack gap={4}>
        <MediaView media={record as MediaData} />
        {fields.map(({ label, data, render }) => (
          <Stack key={data} gap={1}>
            <Typography variant="body1" fontWeight="bold">
              {label}
            </Typography>
            <TextField
              value={render ? render(record?.[data]) : record?.[data]}
            />
          </Stack>
        ))}
        <Box
          sx={{
            p: 2,
            border: "1px solid text.pimary",
            borderRadius: 2,
            bgcolor: "primary.light",
            width: "fit-content",
          }}
        >
          <Typography
            variant="body1"
            gutterBottom
            sx={{
              color: "#FFFFFF",
            }}
          >
            Доступно для скачивания по ссылке:
          </Typography>
          <Button
            variant="contained"
            href={`${import.meta.env.VITE_KRBL_MEDIA}${
              record?.id
            }/download?token=${token}`}
            target="_blank"
            sx={{ mt: 1, width: "100%" }}
          >
            Скачать медиа
          </Button>
        </Box>
      </Stack>
    </Show>
  );
};