import {
  Box,
  LinearProgress,
  Paper,
  Typography,
  useTheme,
} from "@mui/material";

import type { FC } from "react";

type ResultProps = {
  title: string;
  percent: number;
  highlight?: boolean;
};

type ResultsProps = {
  data: Record<string, number> | null;
};

const Result = ({ title, percent, highlight }: ResultProps) => {
  const theme = useTheme();

  return (
    <Box sx={{ padding: "15px 25px" }}>
      <Box
        sx={{
          position: "relative",
          display: "flex",
          gap: "15px",
          alignItems: "center",
          flexGrow: 1,
        }}
      >
        <LinearProgress
          variant="determinate"
          title={title}
          value={percent}
          sx={{
            width: "100%",
            height: "44px",
            background: theme.palette.background.default,
            borderRadius: "10px",
            border: `1px solid ${highlight ? "#FC7230" : theme.palette.grey2.main}`,
            "& > span": { background: highlight ? "#FDE9E0" : "#9A9AAF1A" },
            "&::before": {
              content: `"${title}"`,
              position: "absolute",
              zIndex: 1,
              left: "20px",
              top: "50%",
              transform: "translateY(-50%)",
              color: highlight ? "#FC7230" : theme.palette.grey3.main,
            },
          }}
        />
        <Box sx={{ minWidth: 35 }}>
          <Typography
            sx={{
              minWidth: "45px",
              fontWeight: highlight ? "bold" : "normal",
              color: highlight ? "#FC7230" : theme.palette.text.primary,
            }}
          >{`${percent}%`}</Typography>
        </Box>
      </Box>
    </Box>
  );
};

export const Results: FC<ResultsProps> = ({ data }) => {
  const theme = useTheme();

  if (!data || !Object.keys(data).length)
    return (
      <Typography margin="20px 0 0 0" textAlign="center" m="10px 0">
        нет данных о результатах
      </Typography>
    );

  return (
    <Box>
      <Typography
        component="h3"
        sx={{
          marginTop: "100px",
          fontSize: "24px",
          fontWeight: "bold",
          color: theme.palette.text.primary,
        }}
      >
        Статистика по результатам
      </Typography>
      <Paper
        sx={{
          borderRadius: "12px",
          boxShadow: "0 0 20px rgba(0, 0, 0, 0.15)",
          marginTop: "30px",
        }}
      >
        {Object.entries(data).map(([title, percent], index) => (
          <Result
            key={title}
            title={title}
            percent={percent}
            highlight={!index}
          />
        ))}
      </Paper>
    </Box>
  );
};
