import { Typography, Box, Grid, TextField, FormControlLabel, Checkbox } from '@mui/material';

const HazardousMaterial = ({ 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'>
					Hazardous material settings
				</Typography>
			</Grid>

			<Grid item flex={2} xs={8}>
				<Box component='form'>
					<Box
						component='div'
						sx={{
							display: 'flex',
							flexDirection: 'column',
							gap: 3,
						}}>
						<FormControlLabel
							control={
								<Checkbox
									checked={state?.only_quote_ground_hazardous}
									onChange={e =>
										handleChange(
											'only_quote_ground_hazardous',
											e.target.checked
										)
									}
								/>
							}
							label='Only quote ground service for hazardous materials shipments.'
						/>
						<TextField
							type='number'
							label='Ground hazardous material fee'
							variant='standard'
							helperText='Enter an amount, e.g 20. or Leave blank to disable.'
							InputLabelProps={{ shrink: true }}
							inputProps={{ maxLength: 7 }}
							fullWidth
							value={state?.ground_hazardous_material_fee}
							onChange={e =>
								e.target.value.length < 8 &&
								handleChange('ground_hazardous_material_fee', e.target.value)
							}
						/>
						<TextField
							type='number'
							label='Air hazardous material fee'
							variant='standard'
							helperText='Enter an amount, e.g 20. or Leave blank to disable.'
							InputLabelProps={{ shrink: true }}
							fullWidth
							value={state?.air_hazardous_material_fee}
							onChange={e =>
								e.target.value.length < 8 &&
								handleChange('air_hazardous_material_fee', e.target.value)
							}
						/>
					</Box>
				</Box>
			</Grid>
		</Grid>
	);
};

export default HazardousMaterial;