/* eslint-disable react/button-has-type */
import { Dashboard } from '@mui/icons-material';
import { useEffect, useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';

import LoadingPage from '../../Components/Layout/LoadingPage';
import { fetchCompanyData } from '../../ReduxState/companies/companiesSlice';
import type { AppDispatch, RootState } from '../../ReduxState/store';
import type { UserModel } from '../../Store/User/user-context.helper';
import type { CompanyDbModel } from '../Companies/Components/CompaniesComponents.helper';
import styles from './HomePage.module.scss';



const HomePage = (): JSX.Element => {
	const user: UserModel = useSelector((state: RootState) => state.login.user);
	const dispatch = useDispatch<AppDispatch>();
	const companies: CompanyDbModel[] | null = useSelector(
		(state: RootState) => state.companies.companiesList
	);

	const isFinishedLoading = () => user && companies;

	// useEffect(() => {
	// 	dispatch(fetchCompanyData());
	// }, [dispatch]);

	return (
		// eslint-disable-next-line react/jsx-no-useless-fragment
		<>
			{/* // 	{isFinishedLoading() ? (
		// 		<> */}
			{!companies ? (
				<div className={styles.container}>
					<h3>We are sorry but if you see this page probably</h3>
					<p>Something went wrong</p>
					<div className={styles.buttonContainer}>
						<p>Please try to reload data</p>
						{/* TODO: reload company data button */}
						{/* TODO: improve css representation */}
						{/* <button onClick={getAccountAndCompanies}>Reload Data</button> */}
					</div>
				</div>
			) : (
				<Dashboard />
			)}
		</>
		// ) : (
		// 	<LoadingPage />
		// )}
		// </>
	);
};

export default HomePage;