import CropGeneral from "@ui_kit/Modal/CropModal/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 {PercentCrop} from "react-image-crop";
import {MutableRefObject} from "react";

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

interface Props{
    imageUrl: null | string;
    handleSizeChange: (a: number)=> void;
    handleRotateClick: Promise<void>;
    getInitialCrop: (imageWidth: number, imageHeight: number, aspectRatio: number)=> PercentCrop;
    modalProps: {string:{}};
    modalStep: string;
    stepIndex: number;
    onClose: () => void;
    cropImageElementRef:  MutableRefObject<HTMLImageElement>;
    onDeleteClick?: () => void;
    cropAspectRatio?: {
        width: number;
        height: number;
    };
}

export default function SwitchCaseCrop ({imageUrl,
                                            cropAspectRatio,
                                            handleSizeChange,
                                            handleRotateClick,
                                            getInitialCrop,
                                            onDeleteClick,
                                            onClose,
                                            modalStep,
                                            stepIndex,
                                            cropImageElementRef}: Props) {
    switch (modalStep) {
        case "desktop": {
            return(
                <>
                    <CropGeneral
                        imageUrl={imageUrl}
                        handleSizeChange={handleSizeChange}
                        handleRotateClick={handleRotateClick}
                        getInitialCrop={getInitialCrop}
                        cropAspectRatio={cropAspectRatio}
                        onDeleteClick={onDeleteClick}
                        onClose={onClose}
                        modalProps={modalProps.desktop}
                        modalStep={stepIndex}
                        cropImageElementRef={cropImageElementRef}
                    />
                </>

            )
        }
        case "tablet": {
            return(
                <>
                    <CropGeneral
                    imageUrl={imageUrl}
                    handleSizeChange={handleSizeChange}
                    handleRotateClick={handleRotateClick}
                    getInitialCrop={getInitialCrop}
                    cropAspectRatio={cropAspectRatio}
                    onDeleteClick={onDeleteClick}
                    onClose={onClose}
                    modalProps={modalProps.tablet}
                    modalStep={stepIndex}
                    cropImageElementRef={cropImageElementRef}
                />

                </>

            )
        }
        case "mobile": {
            return(
                <CropGeneral
                    imageUrl={imageUrl}
                    handleSizeChange={handleSizeChange}
                    handleRotateClick={handleRotateClick}
                    getInitialCrop={getInitialCrop}
                    cropAspectRatio={cropAspectRatio}
                    onDeleteClick={onDeleteClick}
                    onClose={onClose}
                    modalProps={modalProps.mobile}
                    modalStep={stepIndex}
                    cropImageElementRef={cropImageElementRef}
                />
            )
        }
        case "small": {
            return(
                <CropGeneral
                    imageUrl={imageUrl}
                    handleSizeChange={handleSizeChange}
                    handleRotateClick={handleRotateClick}
                    getInitialCrop={getInitialCrop}
                    cropAspectRatio={cropAspectRatio}
                    onDeleteClick={onDeleteClick}
                    onClose={onClose}
                    modalProps={modalProps.small}
                    modalStep={stepIndex}
                    cropImageElementRef={cropImageElementRef}
                />
            )
        }
    }
}