import { Typography, Box, Grid, FormControl, RadioGroup, FormControlLabel, Radio } from '@mui/material';

/**
 * Whether UPS quotes use the account's negotiated rates or the published retail (list) rates.
 */
const RateSource = ({ state = {}, handleChange = (name = '', val = '') => {} }) => {
	return (
		<Grid container spacing={1} flex mt={3} mb={3}>
			<Grid item flex={1} xs={4}>
				<Typography variant='subtitle1' fontWeight='bold'>
					Rate source
				</Typography>
			</Grid>

			<Grid item flex={2} xs={8}>
				<Box component='form'>
					<FormControl>
						<RadioGroup
							name='ups-small-rate-source-group'
							value={Number(state?.negotiated_rates) || 1}
							onChange={e => handleChange('negotiated_rates', Number(e.target.value))}>
							<FormControlLabel
								value={1}
								control={<Radio />}
								label='Use my negotiated rates.'
								title='Use my negotiated rates.'
							/>
							<FormControlLabel
								value={2}
								control={<Radio />}
								label='Use retail (list) rates.'
								title='Use retail (list) rates.'
							/>
						</RadioGroup>
					</FormControl>
				</Box>
			</Grid>
		</Grid>
	);
};

export default RateSource;