export interface Image {
id? : number;
image_id? : number;
path : string;
}

export interface ImageFileList{
images? : Image[];
length? : number;
}

export interface ImageFileMiddleWare{
type : 'change' | 'new' | 'delete' | 'load';
source? : File;
sourceUrl? : string;
images? : Image[];
index? : number;
}

export interface ImageFileAction{
type : 'change' | 'new' | 'delete' | 'load';
image? : Image;
}


export interface ImageFileListAction{
type : 'change' | 'new' | 'delete' | 'load';
image? : Image;
images? : Image[];
index? : number;
}

export function useImageReducer(){
const [uploadImage] = useMutation<{uploadImage : Image}>(UPLOAD_IMAGE);
const [removeImage] = useMutation<{deleteImage : string}>(DELETE_IMAGE);

const [image, imageDispatch] = useMiddlewareReducer<Image, ImageFileAction>(imageReducer, {path : null}, imageUpload);
const [images, imageListDispatch] = useMiddlewareReducer<ImageFileList, ImageFileListAction>(imageListReducer, {images:[], length:0}, imageUpload);
useEffect(()=>{
console.log("images===>", images);

}, [images]);

async function imageUpload(action : ImageFileMiddleWare){
if(action.type == "new" || action.type == "change")
{
const image = await uploadImage({ variables : { file : { file : action.source }}});

if(image.data && image.data.uploadImage){
return {...action, image :image.data.uploadImage, index : action.index};
}
}else
{
return {...action};
}

return null;
}

async function imageRemove(path){
return new Promise((resolve, reject)=>{
removeImage({
variables : {
path
}
}).then(res=>{
resolve(res.data.deleteImage);
}).catch(err=>{
reject(err);
});
});
}

function imageReducer(state : Image, action : ImageFileAction){
if(action.type == "new" && action.image){
return { path : action.image.path };
}else if(action.type == "load" && action.image){
return { path : action.image.path };
}else if(action.type == "change" && action.image){
imageRemove(state.path);
return { path : action.image.path };
}else if(action.type == "delete"){
imageRemove(state.path);
return { path : null };
}
return state;
}
function imageListReducer(state : ImageFileList, action: ImageFileListAction){
const sourceLength = state.images ? state.images.length : 0;
if(action.type == "load" && action.images){
return { images : action.images, length : action.images.length };
}

else if(action.type == "new" && action.image){
return {
images : [...state.images, { path : action.image.path, image_id: action.image.id }],
length : sourceLength + 1
}
}
else if(action.type == "change" && action.image){
const currentImage = state.images[action.index];
imageRemove(currentImage.path);
let newImage = [...state.images];
newImage[action.index] = { path : action.image.path, image_id : action.image.id };

return {
images : newImage,
length : newImage.length
};
}
else if(action.type == "delete" && action.index != null && action.index != undefined){
const image = state.images.splice(action.index, 1);
imageRemove(image[0].path);

return {
images : [...state.images],
length : state.images.length
}
}
return state;
}

function setImage(props : ImageFileAction){
imageDispatch(props);
}

function setImageList(props : ImageFileListAction){
imageListDispatch(props);
}

return {
setImage,
image,
images,
setImageList,
}
}


이미지 업로드 코드 이 정도 선에서 정리 됨