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

import { useQuizData } from "@contexts/QuizDataContext";

import Stepper from "@ui_kit/Stepper";

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

export const Footer = ({ stepNumber, nextButton, prevButton }: FooterProps) => {
  const theme = useTheme();
  const { questions, settings } = useQuizData();
  const questionsAmount = questions.filter(
    ({ type }) => type !== "result"
  ).length;

  return (
    <Box
      sx={{
        position: "relative",
        padding: "15px 0",
        borderTop: `1px solid ${theme.palette.grey[400]}`,
        height: "75px",
        display: "flex",
        background: settings.cfg.design
          ? "rgba(154,154,175, 0.2)"
          : "transparent",
      }}
    >
      <Box
        sx={{
          width: "100%",
          maxWidth: "1410px",
          padding: "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={{ flexGrow: 1 }}>
            <Typography sx={{ color: theme.palette.text.primary }}>
              Вопрос {stepNumber} из {questionsAmount}
            </Typography>
            <Stepper activeStep={stepNumber} steps={questionsAmount} />
          </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>
  );
};