/* eslint-disable react/destructuring-assignment */
import type React from 'react';
import { useEffect, useState } from 'react';
import { useSelector } from 'react-redux';
import { Link } from 'react-router-dom';

import environment from '../../../../Environments/environment';
import type { CompanyDbModel } from '../../../../Pages/Companies/Components/CompaniesComponents.helper';
import type { RootState } from '../../../../ReduxState/store';
import styles from './BmimLogo.module.scss';

interface BmimInterface {
	bmimLogoName: string;
	bmimClass: string;
}
const { dashboard } = environment.frontendRoutes;
const BmimLogo: React.FC<BmimInterface> = (props: BmimInterface): JSX.Element => {
	const selectedCompany: CompanyDbModel | null = useSelector(
		(state: RootState) => state.companies.selectedCompany
	);
	const [branding, setBranding] = useState<CompanyDbModel['branding'] | null>(null);

	useEffect(() => {
		if (selectedCompany?.branding) {
			console.log('setting branding', selectedCompany.branding);
			setBranding(selectedCompany.branding);
		} else {
			setBranding(null);
		}
	}, [selectedCompany]);

	return (
		<Link className={props.bmimClass} to={dashboard}>
			<img
				alt="BMIM Logo"
				src={`${process.env.PUBLIC_URL}${branding?.logo || props.bmimLogoName}`}
				className={styles.bmimLogo}
			/>
		</Link>
	);
};
export default BmimLogo;