import { Delete, Route } from "@mui/icons-material";
import { Box, Button, Stack, Typography } from "@mui/material";
import { useReducer } from "react";
import DrawPolygon from "./DrawBound";

const statusType = [
    {
        id: 0,
        message: "برای آغاز ترسیم محدوده، کلیک کنید!",
        buttons: [
            {
                label: "شروع ترسیم محدوده",
                key: "start",
                color: "warning",
                icon: <Route />,
                onclick: (controlDispach) => {
                    controlDispach({ type: "SET_STATUS", status: 1 });
                },
            },
        ],
    },
    {
        id: 1,
        message: "محدوده‌ی موردنظر را با کلیک روی نقشه مشخص کنید. برای اتمام، روی نقطه‌ی ابتدایی کلیک کنید!",
        buttons: [],
    },
    {
        id: 2,
        message: "برای اصلاح محدوده، گوشه‌ها را بکشید. برای ترسیم دوباره، آن را حذف کنید",
        buttons: [
            {
                label: "حذف",
                key: "end",
                color: "error",
                icon: <Delete />,
                onclick: (controlDispach) => {
                    controlDispach({ type: "SET_STATUS", status: 0 });
                },
            },
        ],
    },
];

const createInitialState = (drawBound) => {
    if (drawBound) {
        return { status: 2 };
    }
    return { status: 0 };
};

const reducer = (state, action) => {
    switch (action.type) {
        case "SET_STATUS":
            return { ...state, status: action.status };
        default:
            return state;
    }
};

const MapDrawPolygon = ({ drawBound, setDrawBound }) => {
    const [control, controlDispach] = useReducer(reducer, drawBound, createInitialState);

    return (
        <>
            <DrawPolygon drawBound={drawBound} setDrawBound={setDrawBound} control={control} controlDispach={controlDispach} />
            <Stack
                direction={"row"}
                justifyContent={"center"}
                sx={{ position: "absolute", left: 0, top: 0, zIndex: 2000, width: "100%" }}
            >
                <Box
                    sx={{
                        background: (theme) => theme.palette.secondary.main,
                        borderBottomLeftRadius: 8,
                        borderBottomRightRadius: 8,
                        py: 0.5,
                        px: 2,
                    }}
                >
                    <Typography align="center" component={"div"} variant="caption" color={"#fff"}>
                        {statusType.find((st) => st.id == control.status).message}
                    </Typography>
                </Box>
            </Stack>
            <Box
                sx={{
                    position: "absolute",
                    left: 0,
                    bottom: 0,
                    zIndex: 2000,
                    width: "100%",
                    py: 1,
                    background: "linear-gradient(to top, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0))",
                }}
            >
                <Stack direction={"row"} justifyContent={"center"} spacing={2}>
                    {statusType
                        .find((st) => st.id == control.status)
                        .buttons.map((button) => (
                            <Button
                                size="medium"
                                key={button.key}
                                variant="contained"
                                onClick={() => button.onclick(controlDispach)}
                                color={button.color}
                                startIcon={button.icon}
                            >
                                {button.label}
                            </Button>
                        ))}
                </Stack>
            </Box>
        </>
    );
};
export default MapDrawPolygon;