import { PayloadAction, createAsyncThunk, createSlice } from '@reduxjs/toolkit';
import { RootState } from './rootReducer';
import { fetchAll } from './dataSlice';
import { removePicture } from '../share/aufgaben-shared/slices/picturesSlice';
import axios from 'B/axios';

const requestImageDelete = createAsyncThunk(
  'data/deleteImage',
  async (_, thunkAPI) => {
    const s = (thunkAPI.getState() as RootState).imageActionsReducer;
    const ergID = s.ergID;
    const picID = s.picID;
    if (picID === null) {
      return thunkAPI.rejectWithValue('INVALID PIC ID');
    }

    const r = await axios.post(`/comment/pic/delete/${picID}`);
    if (r.status === 200) {
      thunkAPI.dispatch(removePicture({picID, ergID}));
    }
  }
);

const requestRotateImage = createAsyncThunk(
  'data/rotateImage',
  async (ergID: number, thunkAPI) => {
    const r = await axios.post(`/comment/pic/rotate/${ergID}`);
    if (r.status === 200) {
      thunkAPI.dispatch(fetchAll());
    }
  }
);

const initialState = {
  isOpen: false,
  ergID: null,
  picID: null
};
const slice = createSlice({
  name: 'data/imageDeleteConfirmation',
  initialState,
  reducers: {
    open(state, { payload }: PayloadAction<{ ergID: number; picID: number }>) {
      state.isOpen = true;
      state.ergID = payload.ergID;
      state.picID = payload.picID;
    },
    close() {
      return initialState;
    }
  },
  extraReducers: (builder) => {
    builder.addCase(requestImageDelete.fulfilled, () => {
      return initialState;
    });
  }
});

export { requestImageDelete, requestRotateImage };
export const { open, close } = slice.actions;
export default slice.reducer;