import { FC } from "react"
import {
    Box,
    Button,
    useMediaQuery,
    useTheme,
} from "@mui/material";
import BackArrowIcon from "@icons/BackArrowIcon";
import { ScreenStepsTypes } from "@/model/CropModal/CropModal";

interface Props {
    nextStepName: ScreenStepsTypes;
    currentStep: number;
    setCurrentStep: (setp: number) => void;
    totalSteps: number;
    onSaveImageClick: () => void;
    resetImage: () => void;
}

export const NavigationPanel: FC<Props> = ({
    nextStepName,
    currentStep,
    setCurrentStep,
    totalSteps,
    onSaveImageClick,
    resetImage,
}) => {
    const theme = useTheme();
    const isMobile = useMediaQuery(theme.breakpoints.down(786));
    const lastStep = currentStep + 1 === totalSteps;

    const handlePrevStep = () => {
        if (currentStep === 0) return;
        setCurrentStep(currentStep - 1);
    };
    const handleNextStep = () => {
        if (lastStep) {
            onSaveImageClick();
        } else {
            setCurrentStep(currentStep + 1);
        }
    };

    return (
        <Box
            sx={{
                marginTop: "18px",
                padding: "0 20px 20px",
                width: "100%",
                display: "flex",
                gap: "5px",
                flexWrap: isMobile ? "wrap" : undefined,
                justifyContent: "space-between"
            }}
        >
            <Button
                onClick={resetImage}
                disableRipple
                sx={{
                    height: "48px",
                    color: "#7E2AEA",
                    borderRadius: "8px",
                    border: "1px solid #7E2AEA",
                    px: "20px",
                    width: isMobile ? "100%" : undefined,
                }}
            >
                Вернуть оригинал
            </Button>
            <Box
                sx={{
                    display: "flex",
                    gap: "10px",
                    
                }}
            >
                {Boolean(currentStep) && 
                <Button
                    onClick={handlePrevStep}
                    variant="contained"
                    sx={{
                        fontSize: "16px",
                        padding: "10px 15px",
                        color: "#FFFFFF",
                        border: "1px solid #9A9AAF",
                        background: "#FFFFFF",
                        "&:hover": {
                            color: "#FFFFFF",
                            border: `1px solid ${theme.palette.primary.dark}`,
                        },
                    }}

                >
                    <BackArrowIcon color={"#7E2AEA"} />
                </Button>
                }
                <Button
                    onClick={handleNextStep}
                    disableRipple
                    variant="contained"
                    sx={{
                        height: "48px",
                        borderRadius: "8px",
                        border: "1px solid #7E2AEA",
                        p: "10px 19px",
                        width: isMobile ? "100%" : undefined,
                        lineHeight: "100%"
                    }}
                >
                    {lastStep ?
                        "Сохранить редактированное" : nextStepName === "mobile" ?
                        "Настроить для мобильной версии"  : nextStepName === "tablet" ? "Настроить для планшетной версии" : "Далее"
                    }
                </Button>
            </Box>

        </Box>
    )
}