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

import { useQuizData } from "@utils/hooks/useQuizData";

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

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

    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>
    );
};
