import { Paper, Box, Typography } from "@mui/material";
import { MediaViewer, ReactMarkdownComponent } from "@widgets";
import { articlesStore, languageStore } from "@shared";
import { observer } from "mobx-react-lite";

export const PreviewLeftWidget = observer(() => {
  const { articleMedia, articleData } = articlesStore;
  const { language } = languageStore;

  return (
    <Paper
      elevation={3}
      sx={{
        width: "100%",
        minWidth: 320,
        background:
          "#806c59 linear-gradient(90deg, rgba(255, 255, 255, 0.2) 12.5%, rgba(255, 255, 255, 0.2) 100%)",
        overflowY: "auto",
        display: "flex",
        flexDirection: "column",
        borderRadius: "10px",
      }}
    >
      <Box
        sx={{
          overflow: "hidden",
          width: "100%",
          minHeight: 100,
          padding: "3px",
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          "& img": {
            borderTopLeftRadius: "10px",
            borderTopRightRadius: "10px",
            width: "100%",
            height: "auto",
            objectFit: "contain",
          },
        }}
      >
        {articleMedia && <MediaViewer media={articleMedia} fullWidth />}
      </Box>
      <Box
        sx={{
          background:
            "#806c59 linear-gradient(90deg, rgba(255, 255, 255, 0.2) 12.5%, rgba(255, 255, 255, 0.2) 100%)",
          color: "white",
          margin: "5px 0px 5px 0px",
          display: "flex",
          flexDirection: "column",
          gap: 1,
          padding: 1,
        }}
      >
        <Typography
          variant="h5"
          component="h2"
          sx={{
            wordBreak: "break-word",
            fontSize: "24px",
            fontWeight: 700,
            lineHeight: "120%",
          }}
        >
          {articleData?.[language]?.heading || "Название информации"}
        </Typography>
      </Box>
      {articleData?.[language]?.body && (
        <Box
          sx={{
            padding: 1,
            maxHeight: "300px",
            overflowY: "scroll",
            background:
              "#806c59 linear-gradient(90deg, rgba(255, 255, 255, 0.2) 12.5%, rgba(255, 255, 255, 0.2) 100%)",
            flexGrow: 1,
          }}
        >
          <ReactMarkdownComponent value={articleData?.[language]?.body} />
        </Box>
      )}
    </Paper>
  );
});