/* eslint-disable react/jsx-no-bind */
/* eslint-disable react/destructuring-assignment */
/* eslint-disable react/no-unused-prop-types */
import AddIcon from '@mui/icons-material/Add';
import BorderColorIcon from '@mui/icons-material/BorderColor';
import DeleteIcon from '@mui/icons-material/Delete';
import { Button, Fab } from '@mui/material';
import Box from '@mui/material/Box';
import type { FormEvent } from 'react';
import type React from 'react';
import { useContext, useEffect, useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { useNavigate } from 'react-router-dom';

import TableHeader from '../../../Components/Layout/Main/TableHeader';
import { deleteCompany } from '../../../ReduxState/companies/companiesSlice';
import type { AppDispatch, RootState } from '../../../ReduxState/store';
import type { CompanyContextModel } from '../../../Store/Companies/company-context-helper';
import { CompaniesContext } from '../../../Store/Companies/company-context-helper';
import type { GlobalStateModel } from '../../../Store/global/GlobalState-context';
import { GlobalStateContext } from '../../../Store/global/GlobalState-context';
import { useUiContext } from '../../../Store/UiContext/UiContext';
import type { CompanyDbModel } from './CompaniesComponents.helper';
import styles from './CompaniesList.module.scss';
import { hasAdminPermission } from '../../../utils/getUserPermissions';
import DeleteCompany from '../../Account/Components/DeleteCompany/DeleteCompany';

export interface CompaniesListInterface {
	switchToForm: () => void;
	setInputHandler: (event: CompanyDbModel) => void;
	editHandler: (id: string) => void;
	// companyList: (event: CompanyDbModel[]) => void;
	companies: CompanyDbModel[] | string;
}

export const CompaniesList: React.FC<CompaniesListInterface> = (
	props: CompaniesListInterface
): JSX.Element => {
	const { toastNotification } = useUiContext();
	const companies = useSelector(
		(state: RootState): CompanyDbModel[] | null => state.companies.companiesList
	);
	const selectedCompany = useSelector(
		(state: RootState): CompanyDbModel | null => state.companies.selectedCompany
	);
	const dispatch = useDispatch<AppDispatch>();
	const { confirmModal } = useUiContext();
	const navigate = useNavigate();
	const companyContext: CompanyContextModel = useContext<CompanyContextModel>(CompaniesContext);
	const [messageShown, setMessageShown] = useState<boolean>(false);
	const globalContext: GlobalStateModel = useContext<GlobalStateModel>(GlobalStateContext);

	const checkPermission = (e?: React.MouseEvent<HTMLAnchorElement>): boolean => {
		if (!hasAdminPermission(selectedCompany)) {
			if (e) e.preventDefault();
			toastNotification('info', 'You do not have permission to modify company settings');
			return false;
		}
		return true;
	};

	function addRemoveMessage(): void {
		setMessageShown(true);
		setTimeout(() => {
			setMessageShown(false);
		}, 2000);
	}

	async function deleteHandler(event: FormEvent): Promise<void> {
		if (!checkPermission()) return;
		const id = event.currentTarget.parentElement?.parentElement?.id as string;
		const isConfirmed = await confirmModal({
			title: 'Confirm company deletion',
			message: 'Are you sure you want to delete this company?'
		});

		if (isConfirmed && id !== '') {
			const payload = { company_id: id };
			console.log('dispatching delete', payload);
			dispatch(deleteCompany(payload));
			addRemoveMessage();
		}
	}

	function editHandler(companyId: string): void {
		if (!checkPermission()) return;
		navigate('/companySettings', { state: { showCompanyForm: true, editCompanyId: companyId } });
	}

	function addCompanyHandler(): void {
		if (!checkPermission()) return;
		// navigate('/companySettings', { state: { showCompanyForm: true } });
		navigate('/choosecompanytype');
	}

	useEffect(() => {
		addRemoveMessage();
	}, [globalContext.companies]);

	return (
		<div className={styles.companiesTable}>
			<TableHeader first="Company name" second="Last update" third="" />
			<form className={styles.companiesTable__list}>
				{companies &&
					companies.map((item, idx) => (
						// eslint-disable-next-line jsx-a11y/label-has-for, react/no-array-index-key
						<label key={idx} id={item.company_id}>
							<p data-company-name="companyName">{item.company_name}</p>
							<p>{item.record_created.split('GMT', 5)}</p>
							{/* {deferredUserType?.account_type?.title !== 'Advisor' &&  */}
							<p>
								<Button
									onClick={() => editHandler(item.company_id)}
									startIcon={<BorderColorIcon />}
								/>
								{/* <Button onClick={deleteHandler} startIcon={<DeleteIcon />} /> */}
								<DeleteCompany companyData={item} displayAs="icon" />
							</p>
						</label>
					))}
			</form>
			{messageShown && (
				<p className={companyContext.addOrRemoveCompanyClass}>{companyContext.addRemoveMessage}</p>
			)}
			{/* {deferredUserType?.account_type?.title !== 'Advisor' &&  */}
			<Box
				className={styles.companiesTable__addCompany}
				sx={{
					'& > :not(style)': {
						m: 1
					}
				}}
			>
				<Fab aria-label="add" color="primary" onClick={addCompanyHandler}>
					<AddIcon />
				</Fab>
				<p>Add company</p>
			</Box>
		</div>
	);
};