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

const WeightThreshold = ({ 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'>
					Weight threshold (lbs)
				</Typography>
			</Grid>
			<Grid item flex={2} xs={8}>
				<Box component='form'>
					<Box
						component='div'
						sx={{
							display: 'flex',
							flexDirection: 'column',
							gap: 3,
						}}>
						<TextField
							label='Weight threshold (lbs)'
							title='Weight threshold (lbs)'
							variant='standard'
							helperText='When the total weight of the products in the shopping cart meet or exceed this value, LTL freight quotes will be included in the shipping options. Default weight threshold is 150 lbs.'
							InputLabelProps={{ shrink: true }}
							inputProps={{ maxLength: 7 }}
							fullWidth
							value={state?.weight_threshold_limit}
							onChange={e => {
								e.target.value.match(/^[0-9.]*$/) &&
									handleChange('weight_threshold_limit', e.target.value);
							}}
						/>
					</Box>

					<FormControl sx={{ mt: 1 }}>
						<RadioGroup
							aria-labelledby='weight-threshold-radio-buttons-group-label'
							defaultValue='display_parcel_rates'
							name='weight-threshold-radio-buttons-group'
							value={state?.weight_threshold_option}
							onChange={e => handleChange('weight_threshold_option', e.target.value)}>
							<FormControlLabel
								value='display_parcel_rates'
								control={<Radio />}
								label='Continue to display parcel rates when the weight threshold is met.'
								title='Continue to display parcel rates when the weight threshold is met.'
							/>
							<FormControlLabel
								value='suppress_parcel_rates'
								control={<Radio />}
								label='Suppress parcel rates when the weight threshold is met.'
								title='Suppress parcel rates when the weight threshold is met.'
							/>
						</RadioGroup>
					</FormControl>
				</Box>
			</Grid>
		</Grid>
	);
};

export default WeightThreshold;