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

const RANGE_HELP =
	'Leave blank to display the day-specific delivery estimate. Enter a number (e.g. 2) to present a range for the delivery estimate.';

/**
 * Delivery estimate settings for a provider.
 *
 * showRange adds the range width and how to word it. Only providers whose carrier opts in on the
 * API side pass it, so the setting never appears where it would have no effect.
 */
const DeliveryEstimateOptions = ({
	state = {},
	handleChange = (name = '', val = '') => {},
	showRange = false,
}) => {
	const estimatesOn = +state?.delivery_estimate_options === 2 || +state?.delivery_estimate_options === 3;

	return (
		<Grid container spacing={1} flex mt={3} mb={3}>
			<Grid item flex={1} xs={4}>
				<Typography variant='subtitle1' fontWeight='bold'>
					Delivery estimate options
				</Typography>
			</Grid>
			<Grid item flex={2} xs={8}>
				<Box component='form'>
					<Box component='div'>
						<FormControl>
							<FormLabel id='demo-radio-buttons-group-label'></FormLabel>
							<RadioGroup
								aria-labelledby='demo-radio-buttons-group-label'
								defaultValue='female'
								name='radio-buttons-group'
								value={state?.delivery_estimate_options}
								onChange={e =>
									handleChange('delivery_estimate_options', e.target.value)
								}>
								<FormControlLabel
									value={1}
									control={<Radio />}
									label="Don't display delivery estimates"
									title="Don't display delivery estimates"
								/>
								<FormControlLabel
									value={2}
									control={<Radio />}
									label='Display estimated number of days'
									title='Display estimated number of days'
								/>
								<FormControlLabel
									value={3}
									control={<Radio />}
									label='Display estimated delivery date'
									title='Display estimated delivery date'
								/>
							</RadioGroup>
						</FormControl>
					</Box>

					{showRange && estimatesOn && (
						<Box component='div' mt={2}>
							<TextField
								fullWidth
								variant='standard'
								label='Delivery estimate range'
								title='Delivery estimate range'
								helperText={RANGE_HELP}
								InputLabelProps={{ shrink: true }}
								inputProps={{ maxLength: 2 }}
								value={state?.delivery_range_value || ''}
								onChange={e =>
									/^[0-9]*$/.test(e.target.value) &&
									handleChange('delivery_range_value', e.target.value)
								}
							/>

							<FormControl>
								<RadioGroup
									name='delivery-range-options'
									value={state?.delivery_range_options || 'show_between'}
									onChange={e =>
										handleChange('delivery_range_options', e.target.value)
									}>
									<FormControlLabel
										value='show_between'
										control={<Radio />}
										label='Display range as a from and to date'
										title='Display range as a from and to date'
									/>
									<FormControlLabel
										value='show_on'
										control={<Radio />}
										label='Display range as "on or before date"'
										title='Display range as "on or before date"'
									/>
								</RadioGroup>
							</FormControl>
						</Box>
					)}
				</Box>
			</Grid>
		</Grid>
	);
};

export default DeliveryEstimateOptions;