import { createSlice, createAsyncThunk } from "@reduxjs/toolkit";
import axios from "axios";
import qs from "qs";

export const fetchFunctionArea = createAsyncThunk(
  "functionlistSlice/fetchFunctionArea",
  async () => {
    const query = {
      populate: [
        "FunctionalAreas",
        "FunctionalAreas.Icon"
      ]
      
    };
    const queryString = qs.stringify(query, {
      encodeValuesOnly: true,
    });
    const endpoint = `${process.env.NEXT_PUBLIC_BACKEND_API_URL}/api/home?${queryString}`;
    const response = await axios.get(endpoint);
    const data = response.data.data;
    return data;
  }
);

const functionlistSlice = createSlice({
  name: "functionarea",
  initialState: {
    status: "idle",
    data: [],
    error: null,
  },
  reducers: {},
  extraReducers: (builder) => {
    builder
      .addCase(fetchFunctionArea.pending, (state) => {
        state.status = "loading";
      })
      .addCase(fetchFunctionArea.fulfilled, (state, action) => {
        state.status = "succeeded";
        state.data = action.payload;
      })
      .addCase(fetchFunctionArea.rejected, (state, action) => {
        state.status = "failed";
        state.error = action.error.message;
      });
  },
});
export default functionlistSlice.reducer;