// store/paginationSlice.js
import { createSlice, createAsyncThunk } from "@reduxjs/toolkit";

// Thunk để lấy kết quả từ API với cursor
export const fetchPage = createAsyncThunk(
  "pagination/fetchPage",
  async ({ cursor, sort }, thunkAPI) => {
    const response = await fetch(
      `/api/items?cursor=${cursor || ""}&sort=${sort}`
    );
    const data = await response.json();
    return data; 
    // Giả sử data = { items: [...], nextCursor: "abc", previousCursor: "xyz" }
  }
);

const paginationSlice = createSlice({
  name: "pagination",
  initialState: {
    items: [],
    nextCursor: null,
    previousCursor: null,
    sort: "docdate:asc",
    loading: false,
    error: null,
  },
  reducers: {
    changeSorting: (state, action) => {
      state.sort = action.payload;
    },
  },
  extraReducers: (builder) => {
    builder
      .addCase(fetchPage.pending, (state) => {
        state.loading = true;
        state.error = null;
      })
      .addCase(fetchPage.fulfilled, (state, action) => {
        state.loading = false;
        state.items = action.payload.items;
        state.nextCursor = action.payload.nextCursor;
        state.previousCursor = action.payload.previousCursor;
      })
      .addCase(fetchPage.rejected, (state, action) => {
        state.loading = false;
        state.error = action.error.message;
      });
  },
});

export const { changeSorting } = paginationSlice.actions;
export default paginationSlice.reducer;

// store/index.js
import { configureStore } from "@reduxjs/toolkit";
import paginationReducer from "./paginationSlice";

export const store = configureStore({
  reducer: {
    pagination: paginationReducer,
  },
});

// main.jsx
import React from "react";
import ReactDOM from "react-dom/client";
import { Provider } from "react-redux";
import { store } from "./store";
import App from "./App";

ReactDOM.createRoot(document.getElementById("root")).render(
  <Provider store={store}>
    <App />
  </Provider>
);

// App.jsx
import React, { useEffect } from "react";
import { useSelector, useDispatch } from "react-redux";
import { fetchPage, changeSorting } from "./store/paginationSlice";

export default function App() {
  const { items, nextCursor, previousCursor, sort, loading, error } = useSelector(
    (state) => state.pagination
  );
  const dispatch = useDispatch();

  // Tải dữ liệu lần đầu tiên
  useEffect(() => {
    dispatch(fetchPage({ cursor: null, sort }));
  }, [dispatch, sort]);

  const handleNext = () => {
    if (nextCursor) dispatch(fetchPage({ cursor: nextCursor, sort }));
  };

  const handlePrevious = () => {
    if (previousCursor) dispatch(fetchPage({ cursor: previousCursor, sort }));
  };

  const handleSortChange = (e) => {
    dispatch(changeSorting(e.target.value));
    dispatch(fetchPage({ cursor: null, sort: e.target.value }));
  };

  return (
    <div>
      <h1>Danh sách kết quả</h1>

      {loading && <p>Đang tải...</p>}
      {error && <p>Lỗi: {error}</p>}

      <select value={sort} onChange={handleSortChange}>
        <option value="docdate:asc">Ngày ↑</option>
        <option value="docdate:desc">Ngày ↓</option>
        <option value="slug:asc">Slug ↑</option>
        <option value="slug:desc">Slug ↓</option>
        <option value="score:asc">Điểm số ↑</option>
        <option value="score:desc">Điểm số ↓</option>
      </select>

      <ul>
        {items.map((item) => (
          <li key={item.id}>{item.title} — {item.date}</li>
        ))}
      </ul>

      <div>
        <button disabled={!previousCursor} onClick={handlePrevious}>
          ← Trở lại
        </button>
        <button disabled={!nextCursor} onClick={handleNext}>
          Tiếp theo →
        </button>
      </div>
    </div>
  );
}