// resources\assets\ts\DataPage\picturesSlice.ts
import {
  PayloadAction,
  createAsyncThunk,
  createEntityAdapter,
  createSlice
} from '@reduxjs/toolkit';
import axios from 'B/axios';

//import { RootState } from '../../../DataPage/rootReducer';// Changed from DataPage-specific RootState to generic RootStateWithSlice


interface RootStateWithSlice {
  pictures: any;  
}

interface Picture {
  pic_id: number;
  pic_name: string;
  pic_bem: string;
}

const pictureAdapter = createEntityAdapter<Picture>({
  selectId: (p) => p.pic_id
});

export const fetchPictures = createAsyncThunk(
  'fetch_pictures',
  async (ergID: number, thunkAPI) => {
    const havePictures =
      //(thunkAPI.getState() as RootState).pictures.ergs[ergID] !== undefined;
      (thunkAPI.getState() as RootStateWithSlice).pictures.ergs[ergID]
    if (havePictures) {
      return { pictures: [], ergID };
    }

    const r = await axios.get(`c/${ergID}/pictures`);

    return { pictures: r.data as Picture[], ergID };
  }
);

const slice = createSlice({
  name: 'data/pictures',
  initialState: pictureAdapter.getInitialState({ ergs: {} }),
  reducers: {
    removePicture(
      state,
      { payload }: PayloadAction<{ picID: number; ergID: number }>
    ) {
      const ergPhotos: [number] = state.ergs[payload.ergID];
      if (ergPhotos === undefined) return;

      const picIndex = ergPhotos.findIndex((p) => p === payload.picID);
      if (picIndex === -1) return;
      state.ergs[payload.ergID].splice(picIndex, 1);
    }
  },
  extraReducers: (builder) => {
    builder.addCase(fetchPictures.fulfilled, (state, { payload }) => {
      const isClose = payload.pictures.length === 0;
      if (isClose) {
        delete state.ergs[payload.ergID];
        return;
      }

      pictureAdapter.upsertMany(state, payload.pictures);
      state.ergs[payload.ergID] = payload.pictures.map((c) => c.pic_id);
    });
  }
});

export default slice.reducer;
export const { removePicture } = slice.actions;