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

const PackageRatingMethod = ({ state = {}, handleChange = (name = '', val = '') => {} }) => {
	return (
		<>
			<Grid container spacing={1} flex mb={3}>
				<Grid item flex={1} xs={4} mt={4}>
					<Typography variant='subtitle1' fontWeight='bold'>
						Package rating method when Standard Box Sizes isn't in use
					</Typography>
				</Grid>
				<Grid item flex={2} xs={8} mt={4}>
					<Box component='form'>
						<Box component='div'>
							<FormControl>
								<FormLabel id='demo-radio-buttons-group-label'></FormLabel>
								<RadioGroup
									aria-labelledby='demo-radio-buttons-group-label'
									defaultValue='ship_alone'
									name='radio-buttons-group'
									value={state?.package_rating_method}
									onChange={e =>
										handleChange('package_rating_method', e.target.value)
									}>
									<FormControlLabel
										value='ship_alone'
										control={<Radio />}
										label='Quote each item as shipping as its own package'
									/>
									<FormControlLabel
										value='ship_combine_and_alone'
										control={<Radio />}
										label='Combine the weight of all items without dimensions and quote them as one package while quoting each item with dimensions as shipping as its own package'
									/>
									<FormControlLabel
										value='ship_one_package_70'
										control={<Radio />}
										label='Quote shipping as if all items ship as one package up to 70 LB each'
									/>
									<FormControlLabel
										value='ship_one_package_150'
										control={<Radio />}
										label='Quote shipping as if all items ship as one package up to 150 LB each'
									/>
								</RadioGroup>
							</FormControl>
						</Box>
					</Box>
				</Grid>
			</Grid>
		</>
	);
};

export default PackageRatingMethod;