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

export default function ActivityListingPage() {
  const [activityDetailInfo, setactivityDetailInfo] = useState();
  const [showActivityDetailsModal, setShowActivityDetailsModal] = useState(false);

  const handleCloseActivityDetails = () => {
    setShowActivityDetailsModal(false);
  };

  const dispatch = useDispatch();
  useEffect(() => {
    dispatch(getActivitiesForAdmin({}));
  }, []);
  return (
    <GenericLayout>
     {/* <Layout> */}
       {/* <div className="sidebarContainer"> */}
         {/* <Sidebar /> */}
         {/* <div className="content"> */}
           {/* <ActivityListing /> */}
            <ActivityListingRBAC setactivityDetailInfo={setactivityDetailInfo} setShowActivityDetailsModal={setShowActivityDetailsModal} />
            {showActivityDetailsModal && (
              <ActivityDetailsModal show={showActivityDetailsModal} handleClose={handleCloseActivityDetails} activityDetailInfo={activityDetailInfo} />
            )}
         {/* </div> */}
       {/* </div> */}
     {/* </Layout> */}
    </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: {}
  };
});