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

const GroundTransit = ({ 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'>
					Ground transit time restrictions
				</Typography>
			</Grid>

			<Grid item flex={2} xs={8}>
				<Box component='form'>
					<Box component='div' sx={{ display: 'flex', flexDirection: 'column', gap: 3 }}>
						<TextField
							variant='standard'
							label='Number of transit days'
							helperText='Enter the number of transit days to restrict ground service to. Leave blank to disable this service.'
							InputLabelProps={{ shrink: true }}
							fullWidth
							value={state?.number_of_transit_days}
							onChange={e => {
								e.target.value.length < 3 &&
									e.target.value.match(/^[0-9]*$/) &&
									handleChange('number_of_transit_days', e.target.value);
							}}
						/>
					</Box>

					<Box component='div' mt={2}>
						<FormControl>
							<FormLabel id='demo-radio-buttons-group-label'></FormLabel>
							<RadioGroup
								aria-labelledby='demo-radio-buttons-group-label'
								name='radio-buttons-group'
								value={state?.ground_transit_time_restriction}
								defaultValue={1}
								onChange={e =>
									handleChange('ground_transit_time_restriction', e.target.value)
								}>
								<FormControlLabel
									value={1}
									control={<Radio />}
									label=" Restrict by the carrier's in transit days metric."
								/>
								<FormControlLabel
									value={2}
									control={<Radio />}
									label=' Restrict by the calendar days in transit.'
								/>
							</RadioGroup>
						</FormControl>
					</Box>
				</Box>
			</Grid>
		</Grid>
	);
};

export default GroundTransit;