import { useMemo } from "react";
import {
    Box,
    IconButton,
    Typography,
    useTheme,
} from "@mui/material";
import { CropGeneral } from "./CropGeneral";
import DevaceDesktopIcon from "@ui_kit/Modal/CropModal/IconCropModal/DevaceDesktopIcon";
import DevaceTabletIcon from "@ui_kit/Modal/CropModal/IconCropModal/DevaceTabletIcon";
import DevaceMobileIcon from "@ui_kit/Modal/CropModal/IconCropModal/DevaceMobileIcon";
import DevaceSmallIcon from "@ui_kit/Modal/CropModal/IconCropModal/DevaceSmallIcon";

import type { CropAspectRatio, EditedImage, ScreenStepsTypes } from "@/model/CropModal/CropModal"
import { EditedImagesChangeType } from "./CropModal";
import AmoTrash from "@/assets/icons/AmoTrash";


const modalModels = {
    "desktop": { name: "Десктоп", icon: <DevaceDesktopIcon /> },
    "tablet": { name: "Планшет", icon: <DevaceTabletIcon /> },
    "mobile": { name: "Телефон", icon: <DevaceMobileIcon /> },
    "small": { name: "Самые узкие экраны", icon: <DevaceSmallIcon /> }
};

interface Props {
    editedImage: EditedImage;
    cropAspectRatio: CropAspectRatio;
    currentStep: number;
    currentStepName: ScreenStepsTypes;

    editedImagesChange: EditedImagesChangeType;
    onDeleteClick: () => void;
};

export default function WorkSpace({
    editedImage,
    currentStep,
    currentStepName,
    cropAspectRatio,
    editedImagesChange,
    onDeleteClick,
}: Props) {
    const theme = useTheme();
    const currentModel = useMemo(() => (
        modalModels[currentStepName]
    ), [currentStepName]);

    return (
        <>
            <Box
                sx={{
                    mt: "12px",
                    padding: "0 20px",
                    display: "flex",
                    alignItems: "center",
                    justifyContent: "space-between"
                }}
            >
                <Box
                    sx={{
                        width: "100%"
                    }}
                >
                    <Box
                        sx={{
                            display: "flex",
                            justifyContent: "space-between",
                            width: "100%",
                            alignItems: "center"
                        }}
                    >
                        <Box
                            sx={{
                                display: "flex",
                                alignItems: "center",
                                gap: "13px"
                            }}
                        >
                            <Typography
                                sx={{
                                    color: "#4D4D4D",
                                    fontSize: "24px",
                                    fontWeight: 500,
                                    lineHeight: "28.44px",

                                }}
                            >{currentModel.name}</Typography>
                            {currentModel.icon}
                        </Box>
                        <IconButton
                            onClick={onDeleteClick}
                            sx={{
                                height: "24px",
                                width: "24px",
                                p: 0,
                                color: theme.palette.orange.main,
                                borderRadius: "50%",
                                mb:"5px",
                            }}
                        >
                            <AmoTrash/>
                        </IconButton>

                    </Box>

                    <Typography sx={{
                        fontSize: "13.8px",
                        color: "#9A9AAF",
                        lineHeight: "16px",
                    }}>
                        {currentStep + 1 + " шаг"}
                    </Typography>
                </Box>


            </Box>
            <CropGeneral
                editedImage={editedImage}
                cropAspectRatio={cropAspectRatio}
                editedImagesChange={editedImagesChange}
            />
        </>
    );
}