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

export const fetchHeader = createAsyncThunk(
    "HeaderSlice/fetchHeader",
    async () => {
        const query = {
            populate: [
                "headerLeft",
                "headerRight.image",
            ],
        };
        const queryString = qs.stringify(query, {
            encodeValuesOnly: true,
        });
        const endpoint = `${process.env.NEXT_PUBLIC_BACKEND_API_URL}/api/headers?${queryString}`;
        const response = await axios.get(endpoint);
        return response.data.data;
    }
);

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