import React, { useEffect, useState } from "react";
import { Link } from "react-router-dom";
import usersService from "../../services/UsersService";
import ParentWaiting from "../MyOffers/ParentWaiting";
import MyOffersFamilyTable from "../MyTasks/MyOffersFamilyTable";
import FamilyActiveLSlde from "./FamilyActiveLSlde";
import { useDispatch, useSelector } from "react-redux";
import { tableReload } from "../../store/TableReloads";

export default function FamilyDash({ familyOffers, MyActiveJobList }) {
  // console.log("PROPS IN FAMILY DASH->", familyOffers?.result_list);

  const dispatch = useDispatch();
  
  const userApi = new usersService();

  const trending = MyActiveJobList;
  
  const { familyBannersList } = useSelector((state) => state.familyBannersList);

  const { familyResources:{ tab_categories } } = useSelector((state) => state.familyResources);

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

  let [reloadBanner, setReloadBanner] = useState(0)

  // DO NOT UNCOMMENT THE CODE BELOW
  
  // let [familyBannersList, setFamilyBannersList] = useState({loading:false, result:{}})
  // const getFamilyBanners = async () => { // FUNCTION TO GET FAMILY BANNERS
  //   setFamilyBannersList({loading:true, result:[]});
  //   try {
  //     const res = await userApi.getFamilyBannersList();
  //     setFamilyBannersList({loading:false, result:res.data});
  //     console.log('TEST RESPONSE', res.data)
  //   } catch (error) {
  //     setFamilyBannersList({loading:false, result:[]});
  //     console.log("Error getting tasks");
  //   }
  // };

  // useEffect(()=>{
  //   getFamilyBanners()
  // },[])

  useEffect(()=>{
    if(reloadBanner >= 2){
      dispatch(tableReload({ type: "FAMILYBANNERSLIST" })); // RELOAD FAMILY BANNERS LIST EVERY 10 MINS
      setReloadBanner(0)
    }
    const timer = setInterval(()=>{
      setReloadBanner(prev => prev+1)
    },300000)

    return ()=>{
      clearInterval(timer)
    }
  },[reloadBanner])

  return (
    <div>
      <div className="home-page-wrapper">
        {/* <CommonHead commonHeadData={props.commonHeadData} /> */}

        {/* Header */}
        <div className="text-white mb-4 p-2 w-full rounded-xl bg-sky-blue place-content-center">
          <div className="w-full flex flex-wrap gap-x-4">
            <p className="text-lg font-normal">Welcome</p>
            <div className="">
              <h1 className="text-lg font-normal">{`${userDetails?.firstname} ${userDetails?.lastname}`}</h1>
            </div>
          </div>
          <div className="w-full text-sm flex justify-end items-end">
            <p>Last Login: {`${userDetails?.last_login.split(' ')[0]}`}</p>
          </div>
        </div>

        {process.env.REACT_APP_SHOW_NEW_FAMILY_DASH == '1' &&
        <>
          {familyBannersList?.result_list && Object.keys(familyBannersList?.result_list).length > 0 &&
            // Loop for Family Banners
            <div className="w-full mb-4 grid grid-cols-2 md:grid-cols-3 gap-2 md:gap-4">
              {Object.keys(familyBannersList?.result_list).map((item, index) => {
                let content = familyBannersList?.result_list[item]
                let action = item == 'recommend' ? 'familymarket' : 'mytask'
                return (
                  <Link key={item} to={`/${action}`} className={`rounded-xl bg-white dark:bg-dark-white shadow-md flex justify-center items-center transition-all duration-300 hover:shadow-sm`}>
                    <div className="h-full w-full">
                      <img className="w-full h-[12rem] object-cover object-left rounded-t-xl" src={content.banner.image} alt='banner image' />
                      <div className="h-[7rem] flex flex-col justify-between">
                        <div className="px-2 py-1 border-b border-slate-300 h-[5.4rem] overflow-hidden flex flex-col gap-2">
                          <h1 className="text-lg text-[#083e21] dark:text-white font-bold tracking-wide">{content.banner.text}</h1>
                          <p className="text-sm text-black dark:text-white">{content.banner.description}</p>
                        </div>

                        <div className="px-2 py-1 flex justify-between items-center">
                          <span className="text-slate-400 dark:text-slate-200 text-sm">6w ago</span>
                          {/* Dots */}
                          <div className="flex justify-center gap-1">
                            <div className="w-1 h-1 bg-slate-400 rounded-full"></div>
                            <div className="w-1 h-1 bg-slate-400 rounded-full"></div>
                            <div className="w-1 h-1 bg-slate-400 rounded-full"></div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </Link>
                )
              })}
            </div>
          }
          
          {tab_categories?.data &&
          <div className="mb-4">
            <h1 className="my-4 text-26 font-bold text-dark-gray dark:text-white tracking-wide">Resources</h1>
            <div className="w-full grid grid-cols-2 md:grid-cols-3 gap-2 md:gap-4">
              {tab_categories.data.map((item) => {
                if(item.enabled){
                return (
                  <Link key={item.uid} to={item?.action} className={`rounded-xl bg-white dark:bg-dark-white shadow-md flex justify-center items-center transition-all duration-300 hover:shadow-sm`}>
                    <div className="h-full w-full">
                      <img className="w-full h-[12rem] object-cover rounded-t-xl" src={item?.banner} alt='banner image' />
                      <div className="h-[7rem] flex flex-col justify-between">
                        <div className="px-2 py-1 border-b border-slate-300 h-[5.4rem] overflow-hidden flex flex-col gap-2">
                          <h1 className="text-lg text-[#083e21] dark:text-white font-bold tracking-wide">{item?.content}</h1>
                          {/* <p className="text-sm text-black dark:text-white">{'Description'}</p> */}
                        </div>

                        <div className="px-2 py-1 flex justify-between items-center">
                          <span className="text-slate-400 dark:text-slate-200 text-sm">6w ago</span>
                          {/* Dots */}
                          <div className="flex justify-center gap-1">
                            <div className="w-1 h-1 bg-slate-400 rounded-full"></div>
                            <div className="w-1 h-1 bg-slate-400 rounded-full"></div>
                            <div className="w-1 h-1 bg-slate-400 rounded-full"></div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </Link>
                  )}
                })}
            </div>
          </div>
          }
        </>
        }

        {familyOffers?.result_list && familyOffers?.result_list.length > 0 && (
          <MyOffersFamilyTable
            familyOffers={familyOffers?.result_list}
            image_server={familyOffers?.session_image_server}
            className="mb-10"
          />
        )}
        {trending && trending.length > 0 && (
          <FamilyActiveLSlde
            trending={trending}
            className="mb-10"
            image_server={familyOffers?.session_image_server}
          />
        )}

        {/*<TopSellerTopBuyerSliderSection className="mb-10" />*/}
        <ParentWaiting className="mb-10" />
      </div>
    </div>
  );
}