import { useQuizData } from "@contexts/QuizDataContext";
import { Box, Typography, useTheme } from "@mui/material";
import { ReactNode } from "react";

type FooterProps = {
  stepNumber: number | null;
  nextButton: ReactNode;
  prevButton: ReactNode;
};

export const Footer = ({ stepNumber, nextButton, prevButton }: FooterProps) => {
  const theme = useTheme();
  const { questions } = useQuizData();
  console.log(questions);

  return (
    <Box
      sx={{
        position: "relative",
        padding: "15px 0",
        borderTop: `1px solid ${theme.palette.grey[400]}`,
        height: "75px",
        display: "flex",
      }}
    >
      <Box
        sx={{
          width: "100%",
          maxWidth: "1000px",
          padding: "0 10px",
          margin: "0 auto",
          display: "flex",
          alignItems: "center",
          gap: "10px",
        }}
      >
        {/*{mode[settings.cfg.theme] ? (*/}
        {/*    <NameplateLogoFQ style={{ fontSize: "34px", width:"200px", height:"auto" }} />*/}
        {/*):(*/}
        {/*    <NameplateLogoFQDark style={{ fontSize: "34px", width:"200px", height:"auto" }} />*/}
        {/*)}*/}
        {stepNumber !== null && (
          <Box
            sx={{
              display: "flex",
              alignItems: "center",
              gap: "10px",
              marginRight: "auto",
              color: theme.palette.text.primary,
            }}
          >
            <Typography>Шаг</Typography>
            <Typography
              sx={{
                display: "flex",
                justifyContent: "center",
                alignItems: "center",
                fontWeight: "bold",
                borderRadius: "50%",
                width: "30px",
                height: "30px",
                color: "#FFF",
                background: theme.palette.primary.main,
              }}
            >
              {stepNumber}
            </Typography>
            <Typography>Из</Typography>
            <Typography sx={{ fontWeight: "bold" }}>
              {questions.filter((q) => q.type !== "result").length}
            </Typography>
          </Box>
        )}

        <Box
          sx={{
            display: "flex",
            alignItems: "center",
            gap: "10px",
            marginRight: "auto",
            // color: theme.palette.grey1.main,
          }}
        >
          {/* <Typography>Шаг</Typography>
          <Typography
            sx={{
              display: "flex",
              justifyContent: "center",
              alignItems: "center",
              fontWeight: "bold",
              borderRadius: "50%",
              width: "30px",
              height: "30px",
              color: "#FFF",
              background: theme.palette.brightPurple.main,
            }}
          >
            {stepNumber} */}
          {/* </Typography> */}
          {/* <Typography>Из</Typography>
          <Typography sx={{ fontWeight: "bold" }}>
            {questions.length}
          </Typography> */}
        </Box>
        {prevButton}
        {nextButton}
      </Box>
    </Box>
  );
};