import { MODAL_TYPES } from '../constants/constants';
import {
	TForceConnectionSettings,
	CTConnectionSettings,
	WWELtlConnectionSettings,
	WWESmallConnectionSettings,
	AAACooperConnectionSettings,
	FedexSmallConnectionSettings,
	UpsSmallConnectionSettings,
} from './installed_providers';
import { useDispatch, useSelector } from 'react-redux';
import { useState } from 'react';
import useGetData from '../hooks/useGetData';
import { useGetConnectionSettingsMutation } from '../redux/Actions/ProvidersAction';
import ConnectionSettingsButtons from './ConnectionSettingsButtons';
import {
	Dialog,
	DialogActions,
	DialogContent,
	DialogTitle,
	IconButton,
	useMediaQuery,
} from '@mui/material';
import CloseIcon from '@mui/icons-material/Close';
import { setModal } from '../redux/features/providers/providersSlice';

const ConnectionSettingsModal = () => {
	const [connSettings, setconnSettings] = useState({});
	const { modal } = useSelector(state => state.providers);
	const { isLoading } = useGetData({
		useDynamicMutation: useGetConnectionSettingsMutation,
		setDataState: setconnSettings,
		action: 'get_connection_settings',
	});
	const dispatch = useDispatch();
	const [errorsMsg, setErrorsMsg] = useState({});
	// A provider whose connection is a multi step flow supplies its own footer, because Test
	// Connection and Save make no sense part way through one.
	const [ownsFooter, setOwnsFooter] = useState(false);
	const isSmall = useMediaQuery('(max-width:1200px)');

	const componentProps = {
		connSettings: connSettings,
		setConnSettings: setconnSettings,
		isLoading: isLoading,
		errorsMsg: errorsMsg,
		setErrorsMsg: setErrorsMsg,
		setOwnsFooter: setOwnsFooter,
	};

	const settings_component = {
		WWELtl: <WWELtlConnectionSettings {...componentProps} />,
		WWESmall: <WWESmallConnectionSettings {...componentProps} />,
		TForce: <TForceConnectionSettings {...componentProps} />,
		CentralTransport: <CTConnectionSettings {...componentProps} />,
		AAACooper: <AAACooperConnectionSettings {...componentProps} />,
		FedexSmall: <FedexSmallConnectionSettings {...componentProps} />,
		UpsSmall: <UpsSmallConnectionSettings {...componentProps} />,
	};

	const handleClose = () => {
		setOwnsFooter(false);
		dispatch(setModal({ open: false, type: '', data: {} }));
	};

	return (
		<Dialog
			open={modal.open && modal.type === MODAL_TYPES.connection_settings}
			onClose={handleClose}
			scroll='paper'
			aria-labelledby='scroll-dialog-title'
			aria-describedby='scroll-dialog-description'
			maxWidth={isSmall ? 'sm' : 'md'}
			fullWidth>
			<DialogTitle id='scroll-dialog-title'>Connect Provider</DialogTitle>
			<IconButton
				title='Close'
				aria-label='close'
				onClick={handleClose}
				disabled={isLoading}
				sx={{
					position: 'absolute',
					right: 8,
					top: 8,
					color: theme => theme.palette.grey[500],
				}}>
				<CloseIcon />
			</IconButton>

			<DialogContent dividers>
				{/* Load connection settings component dynamically */}
				{settings_component[modal.data?.code] &&
					settings_component[modal.data?.code]}
			</DialogContent>
			{!ownsFooter && (
				<DialogActions>
					<ConnectionSettingsButtons
						connectionSettings={connSettings}
						isLoading={isLoading}
						setErrorsMsg={setErrorsMsg}
					/>
				</DialogActions>
			)}
		</Dialog>
	);
};

export default ConnectionSettingsModal;