/* eslint-disable react/destructuring-assignment */
import { Link } from 'react-router-dom';

import environment from '../../../../Environments/environment';
import CloseIcon from '../../../UI/Images/Close icon/CloseIconSvg';
import styles from './Popup.module.scss';
import { hasAdminPermission } from '../../../../utils/getUserPermissions';
import { useSelector } from 'react-redux';
import type { RootState } from '../../../../ReduxState/store';
import type { CompanyDbModel } from '../../../../Pages/Companies/Components/CompaniesComponents.helper';
import { useUiContext } from '../../../../Store/UiContext/UiContext';

interface PopupInterface {
	isDemo?: boolean;
	closePopupHandler: () => void;
}

const Popup = (props: PopupInterface): JSX.Element => {
	const { manageSubscription } = environment.frontendRoutes;
	const { toastNotification } = useUiContext();
	const selectedCompany = useSelector(
		(state: RootState): CompanyDbModel | null => state.companies.selectedCompany
	);
	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;
	};

	return (
		<div className={styles.popup}>
			{props.isDemo && (
				<p>
					Choose your plan and add your billing details to proceed with your own financial plan.
				</p>
			)}
			{!props.isDemo && (
				<p>
					Your plan expired, you need to renew your subscription to proceed with your own financial
					data.
				</p>
			)}
			<Link to={manageSubscription} onClick={(e) => checkPermission(e)}>
				{props.isDemo && (
					<p className={styles.hyperlink}>Manage subscriptions to add your financials</p>
				)}
				{!props.isDemo && (
					<p className={styles.hyperlink}>Renew subscriptions to proceed with financials</p>
				)}
			</Link>
			<button
				className={styles.closeButton}
				onClick={props.closePopupHandler}
				title="Close popup"
				type="button"
			>
				<CloseIcon />
			</button>
		</div>
	);
};

export default Popup;