import React, { useState, useEffect } from "react";
import {Navigate} from 'react-router-dom'
import datas from "../../data/product_data.json";
import Layout from "../Partials/Layout";
import usersService from "../../services/UsersService";
import { useSelector, useDispatch } from "react-redux";
import FamilyDash from "./FamilyDash";
import FullAccountDash from "./FullAccountDash";
import LoadingSpinner from '../../components/Spinners/LoadingSpinner'
import { tableReload } from '../../store/TableReloads';

export default function Home(props) {

  const dispatch = useDispatch()

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

  useEffect(()=>{
    if(!commonHeadBanner.loading && (!commonHeadBanner?.data || Object.keys(commonHeadBanner?.data).length < 1)){
      dispatch(tableReload({ type: "HOMEBANNERS" })); // reloads home banner in case it fails to load or encounters error while loading
    }
  },[])

  return (
    <Layout>
      <div className="w-full">
        <>
        {userDetails && userDetails?.account_type == "FAMILY" ? (
          <FamilyDash
            account={userDetails}
          />
        ) : userDetails && userDetails?.account_type == "FULL" ? (
          <>
              {commonHeadBanner.loading ?
                <LoadingSpinner height='h-48' size='16' />
                :
                <FullAccountDash
                  bannerList={commonHeadBanner?.data?.result_list}
                  dashTypes={commonHeadBanner?.data?.home_dash_type}
                  offersList={commonHeadBanner?.data?.offers_list}
                  imageServer={commonHeadBanner?.data?.session_image_server}
                />
              }
          </>
        ) : (
          // <div>
          //   You are not logged in or your account type is not supported.
          // </div>
          <Navigate to='/login' />
        )}
        </>
      </div>
    </Layout>
  );
}