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

export const PreviewRightWidget = observer(() => {
  const { articleData, articleMedia } = articlesStore;
  const { language } = languageStore;
  const article = articleData?.[language];
  if (!article) return null;

  return (
    <Paper
      className="flex-1 flex flex-col max-w-[500px]"
      sx={{
        borderRadius: "10px",
        overflow: "hidden",
      }}
      elevation={2}
    >
      <Box
        className="overflow-hidden"
        sx={{
          width: "100%",
          background: "#877361",
          borderColor: "grey.300",
          display: "flex",
          flexDirection: "column",
        }}
      >
        {articleMedia ? (
          <Box
            sx={{
              overflow: "hidden",
              width: "100%",
              padding: "2px 2px 0px 2px",
              "& img": {
                borderTopLeftRadius: "10px",
                borderTopRightRadius: "10px",
                width: "100%",
                height: "auto",
                objectFit: "contain",
              },
            }}
          >
            <MediaViewer media={articleMedia} fullWidth fullHeight />
          </Box>
        ) : (
          <Box
            sx={{
              width: "100%",
              height: 200,
              flexShrink: 0,
              backgroundColor: "rgba(0,0,0,0.1)",
              display: "flex",
              alignItems: "center",
              justifyContent: "center",
            }}
          >
            <ImagePlus size={48} color="white" />
          </Box>
        )}

        <Box
          sx={{
            p: 1,
            wordBreak: "break-word",
            fontSize: "24px",
            fontWeight: 700,
            lineHeight: "120%",
            backdropFilter: "blur(12px)",
            borderBottom: "1px solid #A89F90",
            boxShadow: "inset 4px 4px 12px 0 rgba(255,255,255,0.12)",
            background:
              "#806c59 linear-gradient(90deg, rgba(255, 255, 255, 0.2) 12.5%, rgba(255, 255, 255, 0.2) 100%)",
          }}
        >
          <Typography variant="h6" color="white">
            {article.heading || "Выберите статью"}
          </Typography>
        </Box>

        <Box
          sx={{
            padding: 1,
            minHeight: "200px",
            maxHeight: "300px",
            overflowY: "scroll",
            background:
              "rgba(179, 165, 152, 0.4), linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.2) 100%)",
            flexGrow: 1,
          }}
        >
          {article.body ? (
            <ReactMarkdownComponent value={article.body} />
          ) : (
            <Typography
              color="rgba(255,255,255,0.7)"
              sx={{ textAlign: "center", mt: 4 }}
            >
              Предпросмотр статьи появится здесь
            </Typography>
          )}
        </Box>

        {/* @ts-ignore */}
        {articleData?.right && articleData?.right.length > 1 && (
          <Box
            sx={{
              p: 2,
              display: "flex",
              justifyContent: "space-between",
              fontSize: "24px",
              fontWeight: 700,
              lineHeight: "120%",
              flexWrap: "wrap",
              gap: 1,
              backdropFilter: "blur(12px)",
              boxShadow: "inset 4px 4px 12px 0 rgba(255,255,255,0.12)",
              background:
                "#806c59 linear-gradient(90deg, rgba(255, 255, 255, 0.2) 12.5%, rgba(255, 255, 255, 0.2) 100%)",
            }}
          >
            {/* @ts-ignore */}
            {articleData.right.map((a, idx) => (
              <button
                key={idx}
                className="inline-block text-left text-xs text-white"
              >
                {a.heading}
              </button>
            ))}
          </Box>
        )}
      </Box>
    </Paper>
  );
});