'use client';

import { useEffect } from 'react'
import GeneralLook from '@/components/dashboard/home/generalLook'
import MembersOverviewChart from '@/components/dashboard/home/membersOverviewChart'
import ServicesSubscriptions from '@/components/dashboard/home/servicesSubscriptions'
import WorkersJobTypes from '@/components/dashboard/home/workersJobTypes'
import IncomeOutcome from '@/components/dashboard/home/incomeOutcome'
import { useDispatch } from 'react-redux';
import { useAppSelector } from '@/redux/store';
import { AppDispatch } from '@/redux/store';
import { load } from '@/redux/features/statistics-slice'
import CircularProgress from '@mui/material/CircularProgress';
import { useTranslations } from 'next-intl';

export default function Page() {

  const dispatch = useDispatch<AppDispatch>()
  const t = useTranslations('statistics');

  const report = useAppSelector((state) => state.statisticsReducer.value.report)
  const loadedFirstTime = useAppSelector((state) => state.statisticsReducer.value.loadedFirstTime)
  const isLoading = useAppSelector((state) => state.statisticsReducer.value.isLoading)   

  useEffect(() => {
    if(loadedFirstTime) return;
    if(isLoading) return;
    async function a()
    {
      await dispatch(load({}))
    }
    a()
  }, [])

  if(isLoading)
  {
    return (
      <>
        <div className="w-full h-[100vh] flex items-center justify-center gap-5">
          <CircularProgress color="secondary" size={22} />                
          <h1 className="dark:text-text-light text-text">{t('loading')}...</h1>
        </div>
      </>
    )
  }

  return (
    <>
      <main className="min-h-[250px] max-h-[750px]">
        <main className="w-full min-w-screen min-h-screen h-auto flex flex-col lg:gap-7 gap-3 pb-[50px]">
          <section className="w-full flex lg:flex-row flex-col-reverse lg:gap-7 gap-3 lg:h-auto lg:min-h-[500px] items-stretch">
            <GeneralLook/>
            <MembersOverviewChart />
          </section>
          <section className="w-full flex lg:flex-row flex-col-reverse lg:gap-7 gap-3 lg:h-auto lg:min-h-[350px] items-stretch">
            <ServicesSubscriptions />
            <WorkersJobTypes />
          </section>
          <section className="w-full flex lg:flex-row flex-col-reverse lg:gap-7 gap-3 lg:h-auto lg:min-h-[350px] items-stretch">
            <IncomeOutcome />
          </section>
        </main>
      </main>
    </>
  );
}