import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
import { getCities } from './service';
import type { CitiesData } from './interface';
// Define types for group data and params
// Define types for group data and params

// Define an initial state
const initialState = {
  cities: [] as CitiesData[],
  status: 'loading',
  error: '',
  meta: { current_page: '', per_page: '', total: 0 }, // Add pagination property
};

// Simulate fetching group data from your service
// slice.ts
export const fetchCities = createAsyncThunk('cities/fetchcities', async(searchQuery: any) => {
  const response = await getCities(searchQuery);
  return response;
});

const citySlice = createSlice({
  name: 'cities',
  initialState,
  reducers: {},
  extraReducers: (builder) => {
    builder
      .addCase(fetchCities.pending, (state) => {
        state.status = 'loading';
      })
      .addCase(fetchCities.fulfilled, (state, action) => {
        state.status = 'succeeded';
        state.cities = action.payload.data.data;
        state.meta = action.payload.data.meta;
      })
      .addCase(fetchCities.rejected, (state, action) => {
        state.status = 'failed';
        state.error = action.error.message ?? 'An error occurred'; // Handle undefined gracefully
      });
  },
});

export default citySlice.reducer;