import { Backdrop, Box, Stack, styled, Typography, useTheme } from "@mui/material";
import SvgLoading from "@/core/components/svgs/SvgLoading";
import SvgError from "@/core/components/svgs/SvgError";

const LoadingImage = styled(Box)({
    "@keyframes load": {
        "0%": {
            // opacity: 0,
            transform: "scale(1)",
        },
        "50%": {
            // opacity: 1,
            transform: "scale(.5)",
        },
        "100%": {
            // opacity: 0,
            transform: "scale(1)",
        },
    },
    animation: "load 2s infinite",
});

const LoadingHardPage = ({
    children,
    loading,
    authState,
    sx = {},
    icon = null,
    width = 200,
    height = 200,
    label = "",
}) => {
    const theme = useTheme();
    return (
        <>
            <Backdrop sx={{ bgcolor: "#fff", zIndex: (theme) => theme.zIndex.drawer + 1, ...sx }} open={loading}>
                <Stack alignItems={"center"} spacing={2}>
                    {authState ? (
                        <Box>
                            {icon ? (
                                <Box sx={{ color: "primary.main", width: width, height: height }}>{icon}</Box>
                            ) : (
                                <SvgError color={theme.palette.error.main} width={width} height={height} />
                            )}
                        </Box>
                    ) : (
                        <LoadingImage>
                            {icon ? (
                                <Box sx={{ color: "primary.main", width: width, height: height }}>{icon}</Box>
                            ) : (
                                <SvgLoading width={width} height={height} />
                            )}
                        </LoadingImage>
                    )}
                    <Stack sx={{ color: authState ? "error.main" : "primary.main" }}>{label}</Stack>
                </Stack>
            </Backdrop>
            {children}
        </>
    );
};

export default LoadingHardPage;