/* eslint-disable react/destructuring-assignment */
/* eslint-disable react/jsx-no-bind */
import CloseIcon from '@mui/icons-material/Close';
import { Collapse } from '@mui/material';
import React, { useContext } from 'react';

import type { FinancialsContextModel } from '../../../../Store/Financials/financials-context';
import { FinancialsContext } from '../../../../Store/Financials/financials-context';
import type { FinancialsSelected } from './FinancialsHelper';

const PopupButton: React.FC<FinancialsSelected> = (props: FinancialsSelected): JSX.Element => {
	const [open, setOpen] = React.useState(true);
	const financialsContext: FinancialsContextModel = useContext(FinancialsContext);
	function closeHandler(): void {
		setOpen(false);
	}

	return (
		<Collapse
			// className={[financialsContext.classForPopup, financialsContext.popupClass].join(' ')}
			className={props.collapseContainer}
			in={open}
			onClick={closeHandler}
		>
			<CloseIcon fontSize="inherit" />
			<p>{props.selected}</p>
			<p>{props.select}</p>
		</Collapse>
	);
};

export default PopupButton;