import { createSlice } from "@reduxjs/toolkit"
import { photosApi } from "../../api/photosApi"
import { createAppAsyncThunk } from "../createAppAsyncThunk"
import IPhotosState from "./IPhotosState"
import IPhoto from "../../interfaces/IPhoto"
import IUser from "../../interfaces/IUser"


const namespace: string = 'photos'

export const getAllPhotos = createAppAsyncThunk(
    `${namespace}/getAllPhotos`,
    async () => {
        return await photosApi.getAllPhotos()
    }
)

export const addPhoto = createAppAsyncThunk(
    `${namespace}/addPhoto`,
    async (photoDto: FormData) => {
        return await photosApi.addPhoto(photoDto)
    }
)

export const getPhotosByUserId = createAppAsyncThunk(
    `${namespace}/getPhotosByUserId`,
    async (id: string) => {
        return await photosApi.getPhotosByUserId(id)
    }
)

export const deletePhotoById = createAppAsyncThunk(
    `${namespace}/deletePhotoById`,
    async (id: string) => {
        return await photosApi.deletePhotoById(id)
    }
)

const initialState: IPhotosState = {
    photos: [],
    photosByUser: [],
    targetedUser: {} as IUser,
    loadingPhotos: false
}

export const photosSlice = createSlice({
    name: namespace,
    initialState: initialState,
    reducers: {
        setTargetedUser(state, action){
            state.targetedUser = action.payload
        }
    },
    extraReducers: (builder) => {
        builder
        .addCase(getAllPhotos.pending, (state) => {
            state.loadingPhotos = true
        })
        .addCase(getAllPhotos.rejected, (state) => {
            state.loadingPhotos = false
        })
        .addCase(getAllPhotos.fulfilled, (state, action) => {
            state.loadingPhotos = false
            if (action.payload.result) state.photos = action.payload.result
        })

        .addCase(getPhotosByUserId.pending, (state) => {
            state.loadingPhotos = true
        })
        .addCase(getPhotosByUserId.rejected, (state) => {
            state.loadingPhotos = false
        })
        .addCase(getPhotosByUserId.fulfilled, (state, action) => {
            state.loadingPhotos = false
            if (action.payload.result) state.photosByUser = action.payload.result
        })

        .addCase(addPhoto.pending, (state) => {
            state.loadingPhotos = true
        })
        .addCase(addPhoto.rejected, (state) => {
            state.loadingPhotos = false
        })
        .addCase(addPhoto.fulfilled, (state, action) => {
            state.loadingPhotos = false
            if (action.payload.result) state.photos.push(action.payload.result)
        })

        .addCase(deletePhotoById.pending, (state) => {
            state.loadingPhotos = true
        })
        .addCase(deletePhotoById.rejected, (state) => {
            state.loadingPhotos = false
        })
        .addCase(deletePhotoById.fulfilled, (state, action) => {
            state.loadingPhotos = false
            if (action.payload.result){
                state.photosByUser = state.photosByUser.filter((photo: IPhoto) => {
                    return photo._id !== action.payload.result?._id
                })
            }
        })
    }
})

export const {setTargetedUser} = photosSlice.actions