import { useSelector } from "react-redux";
import MyJobTable from "../MyTasks/MyJobTable";
import MyOffersTable from "../MyTasks/MyOffersTable";
import LoadingSpinner from "../Spinners/LoadingSpinner";
import Hero from "./Hero";
import HomeActivities from "./HomeActivities";

export default function FullAccountDash(props) {
  // console.log("PROPS IN HOME->", props);

  const { userDetails } = useSelector((state) => state?.userDetails);

  return (
    <>
      <div className="home-page-wrapper">
        <Hero
          className="mb-10"
          data={userDetails}
          bannerList={props.bannerList}
          nextDueTask={props.nextDueTask}
        />
        {props.offersList?.data?.result_list?.length ? (
          <MyOffersTable
            MyActiveOffersList={props.offersList?.data}
            className="mb-10"
          />
        ) : props.MyActiveJobList?.data?.length ? (
          <>
            <div className="w-full mb-5 flex justify-between items-center gap-1">
              <h1 className="text-26 font-bold   text-dark-gray dark:text-white">
                <span>My Tasks</span>
              </h1>
            </div>
            <MyJobTable
              ActiveJobList={props.MyActiveJobList}
              Account={userDetails}
            />
          </>
        ) : !props.offersList?.loading && !props.MyActiveJobList?.loading ? (
          <HomeActivities className="mb-10" />
        ) : (
          <div className="w-full h-[220px] flex items-center justify-center">
            <LoadingSpinner size="16" color="sky-blue" />
          </div>
        )}

        {/*<UpdateTable className="mb-10"/>*/}
        {/*<SellHistoryMarketVisitorAnalytic className="mb-10"/>*/}
        {/*<TopSellerTopBuyerSliderSection className="mb-10" />*/}

        {/*<HomeTaskDisplay*/}
        {/*    jobData={jobData}*/}
        {/*    className="mb-10"*/}
        {/*    bannerList={props.bannerList}*/}
        {/*/>*/}
      </div>
    </>
  );
}