import type { PercentCrop } from "react-image-crop";


export const workSpaceTypesList = {
    images: {
        desktop: {
            step: "desktop",
            ratio: {
                width: 317,
                height: 257
            }
        },
        tablet: {
            step: "tablet",
            ratio: {
                width: 455,
                height: 257
            }
        },
        mobile: {
            step: "mobile",
            ratio: {
                width: 160,
                height: 183
            }
        },
    },
    varimg: {
        desktop: {
            step: "desktop",
            ratio: {
                width: 450,
                height: 450
            }
        },
        mobile: {
            step: "mobile",
            ratio: {
                width: 335,
                height: 335,
            }
        },
    },
    text: {
        desktop: {
            step: "desktop",
            ratio: {
                width: 450,
                height: 450
            }
        },
        mobile: {
            step: "mobile",
            ratio: {
                width: 335,
                height: 335,
            }
        },
    },
    variant: {
        desktop: {
            step: "desktop",
            ratio: {
                width: 450,
                height: 450
            }
        },
        mobile: {
            step: "mobile",
            ratio: {
                width: 335,
                height: 335,
            }
        },
    },
    result: {
        desktop: {
            step: "desktop",
            ratio: {
                width: 700,
                height: 306
            }
        },
        mobile: {
            step: "mobile",
            ratio: {
                width: 335,
                height: 236
            }
        },
    }
} as const;

export type WorkSpaceTypesList = typeof workSpaceTypesList;
export type Writable<T> = { -readonly [K in keyof T]: T[K] };


export type CropOnOpenType = {
    open: boolean;
    originalImageUrl?:string;
    imageBlob?: Blob;
    editedUrlImagesList?: Record<Partial<ScreenStepsTypes>, string>;
    questionId: string;
    questionType: AcceptedQuestionTypes;
    quizId: string;
    variantId?: string;

    selfClose: () => void;
    setPictureUploading: (is: boolean) => void;
}

export type WorkSpaceTypes = WorkSpaceTypesList[AcceptedQuestionTypes];
export interface CropModalProps {
    open: boolean;
    editedImages: Record<keyof WorkSpaceTypes, EditedImage>;
    workSpaceTypes: WorkSpaceTypes;
    originalImageUrl: string;
    
    setEditedImages: (callback: (editedImages: Record<keyof WorkSpaceTypes, EditedImage>) => Record<keyof WorkSpaceTypes, EditedImage>) => void;
    onSaveImageClick: () => void;
    closeCropModal: CropOnCloseType;
    onDeleteClick: () => void;
};

export type AcceptedQuestionTypes = keyof WorkSpaceTypesList; //"images" | "varimg" | "text" | "variant" | "result"


export type CropOnCloseType = () => void;
export type CropOnDeleteIamgeClick = (callback: () => void) => void;

export type EditedImages = Record<Partial<ScreenStepsTypes>, EditedImage>

export type EditedImage = {
    step: string,
    url: string,
    newRules: EditedImageNewRules
}

export type WorkSpaceModel = {
    step: Partial<ScreenStepsTypes>,
    ratio: CropAspectRatio
};

export type CropAspectRatio = {
    width: number;
    height: number;
};

export type ScreenStepsTypes = "desktop" | "tablet" | "mobile" | "small";

export type EditedImageNewRules = {
    crop: PercentCrop,
    darken: number,
    rotate: number,
}
export const DEFAULTCROPRULES = {
    crop: {
        x: 0,
        y: 0,
        width: 0,
        height: 0,
        unit: "%" as "%",
    },
    rotate: 0,
    darken: 0,
}