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

const BackupRates = ({ 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'>
					Checkout options if the plugin fails to return a rate
				</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?.enable_backup_rate || false}
									onChange={e =>
										handleChange('enable_backup_rate', e.target.checked)
									}
								/>
							}
							label=' Present the user with a backup shipping rate.'
						/>
						<TextField
							variant='standard'
							helperText='Label for backup shipping rate (Maximum of 50 characters).'
							InputLabelProps={{ shrink: true }}
							// inputProps={{ style: { padding: '5px 10px' } }}
							inputProps={{ maxLength: 50 }}
							fullWidth
							value={state?.backup_rate_label || ''}
							onChange={e => handleChange('backup_rate_label', e.target.value)}
						/>

						{/* Backup rates options */}
						<FormControl>
							<FormLabel id='demo-radio-buttons-group-label'></FormLabel>
							<RadioGroup
								aria-labelledby='demo-radio-buttons-group-label'
								defaultValue={1}
								name='radio-buttons-group'
								value={state?.backup_rates_typye}
								onChange={e => handleChange('backup_rates_typye', e.target.value)}>
								<FormControlLabel
									value={1}
									control={<Radio />}
									label='Backup rate as a fixed rate.'
								/>
								<TextField
									variant='standard'
									type='number'
									helperText='Enter a value for the fixed rate. (e.g. 10.00)'
									InputLabelProps={{ shrink: true }}
									fullWidth
									value={state?.backup_rate_as_fixed_rate_value || ''}
									onChange={e =>
										e.target.value.length < 8 &&
										handleChange(
											'backup_rate_as_fixed_rate_value',
											e.target.value
										)
									}
								/>

								{/* Backup rates as a % of cart price */}
								<FormControlLabel
									value={2}
									control={<Radio />}
									label='Backup rate as a percentage of Cart price.'
								/>
								<TextField
									variant='standard'
									helperText='Enter a percentage for the backup rate. (e.g. 10.0%)'
									InputLabelProps={{ shrink: true }}
									inputProps={{ maxLength: 7 }}
									fullWidth
									value={state?.backup_rate_as_cart_price_percentage_value || ''}
									onChange={e =>
										e.target.value.match(/^[0-9.]*%?$/) &&
										handleChange(
											'backup_rate_as_cart_price_percentage_value',
											e.target.value
										)
									}
								/>

								{/* Backup rates as a function of the cart weight */}
								<FormControlLabel
									value={3}
									control={<Radio />}
									label='Backup rate as a function of the Cart weight.'
								/>
								<TextField
									variant='standard'
									type='number'
									helperText='Enter a rate per pound to use for the backup rate. (e.g. 2.00)'
									InputLabelProps={{ shrink: true }}
									inputProps={{ maxLength: 7 }}
									fullWidth
									value={state?.backup_rate_as_cart_weight_value || ''}
									onChange={e =>
										e.target.value.length < 8 &&
										handleChange(
											'backup_rate_as_cart_weight_value',
											e.target.value
										)
									}
								/>
							</RadioGroup>
						</FormControl>

						<FormControl>
							<FormControlLabel
								control={
									<Checkbox
										checked={state?.display_backup_rates_plugin_fails || false}
										onChange={e =>
											handleChange(
												'display_backup_rates_plugin_fails',
												e.target.checked
											)
										}
									/>
								}
								label='Display the backup rate if the carrier fails to return a response.'
							/>
							<FormControlLabel
								control={
									<Checkbox
										checked={state?.display_backup_rates_carrier_error || false}
										onChange={e =>
											handleChange(
												'display_backup_rates_carrier_error',
												e.target.checked
											)
										}
									/>
								}
								label=' Display the backup rate if the carrier returns an error.'
							/>
						</FormControl>

						<FormControl>
							<FormLabel id='demo-radio-buttons-group-label'></FormLabel>
							<RadioGroup
								aria-labelledby='demo-radio-buttons-group-label'
								defaultValue={1}
								name='radio-buttons-group'
								value={state?.display_backup_rates_on_checkout}
								onChange={e =>
									handleChange('display_backup_rates_on_checkout', e.target.value)
								}>
								<FormControlLabel
									value={1}
									control={<Radio />}
									label='Display the backup rate if the plugin fails to return a rate.'
								/>
								<FormControlLabel
									value={2}
									control={<Radio />}
									label='Display the backup rate only if no rates, from any shipping method, are presented.'
								/>
							</RadioGroup>
						</FormControl>
					</Box>
				</Box>
			</Grid>
		</Grid>
	);
};

export default BackupRates;