import InfoIcon from '@mui/icons-material/Info';
import { Box, Card, Typography } from '@mui/material';
import { useEffect } from 'react';
import { useSelector } from 'react-redux';
import { Spinner } from '../../index';
import { InputField } from '../../LocationModal';

const initialState = { nickname: '', account_number: '', client_id: '', client_secret: '' };

const FIELDS = [
	{ name: 'nickname', label: 'Nickname', maxLength: 50 },
	{ name: 'account_number', label: 'Account number', maxLength: 50 },
	{ name: 'client_id', label: 'Client ID', maxLength: 100 },
	{ name: 'client_secret', label: 'Client secret', maxLength: 100 },
];

const ConnectionSettings = ({ connSettings, setConnSettings, isLoading, errorsMsg }) => {
	const admin_obj = eniture_rtsq || {};
	const { eniture_api_key_status } = useSelector(state => state.plan);

	useEffect(() => {
		setConnSettings(prevState => ({
			...initialState,
			...prevState,
		}));
	}, []);

	if (isLoading) return <Spinner />;

	return (
		<>
			<Box my={2}>
				<Card
					variant='elevation'
					title='UPS account note'
					sx={{ p: 1, display: 'flex', justifyContent: 'space-between', gap: 2 }}>
					<InfoIcon />
					<Typography variant='subtitle2' sx={{ flexGrow: 1, textWrap: 'wrap !important' }}>
						<strong>Note!</strong> You must have a UPS Small account to use this application.
						If you do not have one contact UPS at 800-742-5877 or{' '}
						<a
							href='https://wwwapps.ups.com/doapp/SignUp?loc=en_US&ClientId=13&returnto=https://www.ups.com/us/en/home'
							target='_blank'
							rel='noopener noreferrer'
							style={{ textDecoration: 'none' }}>
							register online.
						</a>
					</Typography>
				</Card>
			</Box>

			<Box my={3} width={100}>
				<Card variant=''>
					<img
						src={`${admin_obj?.eniture_rtsq_url}/build/assets/ups.png`}
						alt='provider icon'
						title='UPS Small'
						style={{ width: '90px', objectFit: 'contain' }}
					/>
				</Card>
			</Box>

			<Box component='form'>
				{eniture_api_key_status === 'error' && (
					<Typography
						color='error'
						variant='subtitle2'
						title='Invalid Eniture API Key'
						sx={{ textWrap: 'wrap !important' }}
						mb={2}>
						<strong>Note!</strong> Your Eniture API Key is missing or invalid. Kindly
						update your API Key in the Eniture API Connection tab.
					</Typography>
				)}

				<form autoComplete='off' onSubmit={e => e.preventDefault()}>
					<Box component='div' sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
						{FIELDS.map(({ name, label, maxLength }) => (
							<InputField
								key={name}
								name={name}
								label={label}
								maxLength={maxLength}
								value={connSettings[name]}
								onChange={(_, val) => setConnSettings(prev => ({ ...prev, [name]: val }))}
								required={true}
								type='text'
								autoComplete='off'
								inputProps={{
									id: `eniture-rtsq-ups-small-${name}`,
									'aria-label': label,
									maxLength,
									autoCapitalize: 'none',
									spellCheck: false,
								}}
								error={Boolean(errorsMsg?.[name])}
								helperText={errorsMsg?.[name] || ''}
							/>
						))}
					</Box>
				</form>
			</Box>
		</>
	);
};

export default ConnectionSettings;