import React, { useEffect, useState } from "react";
import Layout from "../../../components/layout/Layout";
import { wrapper } from "../../../redux/store";
import Sidebar from "../../../components/layout/VendorDashboardSidebar";
import ActivityListing from "../../../components/vendor/ActivityListing";
import ActivityListingRBAC from "../../../components/vendor/ActivityListingRBAC";
import { getAllCategories, getAllSubCategories } from "../../../redux/actions/categoriesAction";
import { getActivitiesByVendor } from "../../../redux/actions/activityAction";
import { loadUser } from "../../../redux/actions/userActions";
import { useDispatch } from "react-redux";
import { GenericLayout } from "../../../components/layout/Generics/GenericLayout";
// import { loadUser } from "../redux/actions/userActions";
// import { wrapper } from "../redux/store";

export default function ActivityListingPage() {
  const dispatch = useDispatch();
  useEffect(() => {
    dispatch(getActivitiesByVendor());
    dispatch(loadUser());
  }, []);

  const [tableCurrentPage, settableCurrentPage] = useState(1);
  const [tableItemsPerPage, settableItemsPerPage] = useState(10);

  const onChange = (pagination, filters, sorter, extra) => {
    console.log("params", pagination, filters, sorter, extra);
    settableCurrentPage(pagination.current);
    settableItemsPerPage(pagination.pageSize);
    dispatch(getActivitiesByVendor());
  };
  return (
    <GenericLayout>
      {/* <div className="sidebarContainer">
        <Sidebar />
        <div className="content"> */}
      <ActivityListingRBAC onChange={onChange} tableCurrentPage={tableCurrentPage} tableItemsPerPage={tableItemsPerPage} />
      {/* </div>
      </div> */}
    </GenericLayout>
  );
}

/** For server side rendering */
export const getServerSideProps = wrapper.getServerSideProps(store => async ({ req, query }) => {
  await store.dispatch(loadUser());
  // await store.dispatch(getActivitiesByVendor());
  await store.dispatch(getAllCategories());
  await store.dispatch(getAllSubCategories());
  // get the locations data.
  // await store.dispatch(getVendorDetails())

  return {
    props: {}
  };
});