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

const HandlingUnit = ({ 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'>
					Handling unit settings
				</Typography>
			</Grid>
			<Grid item flex={2} xs={8}>
				<Box component='form'>
					<Box
						component='div'
						sx={{
							display: 'flex',
							flexDirection: 'column',
							gap: 3,
						}}>
						{/* Weight of handling unit */}
						<TextField
							label='Weight of handling unit'
							title='Weight of handling unit'
							variant='standard'
							helperText='Enter in pounds the weight of your pallet, skid, crate or other type of handling units, Leave blank to disable.'
							InputLabelProps={{ shrink: true }}
							inputProps={{ maxLength: 7 }}
							fullWidth
							value={state?.weight_of_handling_unit}
							onChange={e => {
								e.target.value.match(/^-?[0-9.]*$/) &&
									handleChange('weight_of_handling_unit', e.target.value);
							}}
						/>

						{/* Maximum weight of handling unit */}
						<TextField
							label='Maximum weight per handling unit'
							title='Maximum weight per handling unit'
							variant='standard'
							helperText='Enter in pounds the maximum weight that can be placed on the handling unit. Leave blank to disable.'
							InputLabelProps={{ shrink: true }}
							inputProps={{ maxLength: 7 }}
							fullWidth
							value={state?.maximum_weight_of_handling_unit}
							onChange={e => {
								e.target.value.match(/^-?[0-9.]*$/) &&
									handleChange('maximum_weight_of_handling_unit', e.target.value);
							}}
						/>
					</Box>
				</Box>
			</Grid>
		</Grid>
	);
};

export default HandlingUnit;