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

const CutOffTime = ({
	state = {},
	handleChange = (name = '', val = '') => {},
	setQuoteSettingsState = () => {},
}) => {
	const weekDaysMarkup = () => {
		return ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'].map((day, i) => (
			<FormControlLabel
				key={day}
				control={
					<Checkbox
						checked={
							(state.week_days &&
								(state?.week_days.includes(i + 1) ||
									state?.week_days.includes(String(i + 1)))) ||
							false
						}
						disabled={+state?.delivery_estimate_options === 1}
						onChange={({ target: { checked } }) => {
							const wd = [...state?.week_days].map(Number);
							const dayIndex = wd.indexOf(i + 1);

							if (dayIndex < 0 && checked) wd.push(i + 1);
							if (dayIndex >= 0 && !checked) wd.splice(dayIndex, 1);

							setQuoteSettingsState(prevState => ({
								...prevState,
								week_days: wd.sort(),
								all_week_days_select: wd?.length === 5 ? true : false,
							}));
						}}
					/>
				}
				label={day}
				title={day}
			/>
		));
	};

	const selectAllWeekDays = useCallback(
		checked => {
			handleChange('all_week_days_select', checked);

			setQuoteSettingsState(prevState => ({
				...prevState,
				week_days: checked ? [1, 2, 3, 4, 5] : [],
			}));
		},
		[handleChange, setQuoteSettingsState]
	);

	return (
		<>
			<Grid container spacing={1} flex mt={3} mb={3}>
				<Grid item flex={1} xs={4}>
					<Typography variant='subtitle1' fontWeight='bold'>
						Cut off time & ship date offset
					</Typography>
				</Grid>
				<Grid item flex={2} xs={8}>
					<Box component='form'>
						<Box
							component='div'
							sx={{
								display: 'flex',
								flexDirection: 'column',
								gap: 3,
							}}>
							<TextField
								type='time'
								label='Order cut off time'
								title='Order cut off time'
								variant='standard'
								helperText='Enter the cut off time (e.g. 2:00) for orders. Orders placed after this time will be quoted as shipping the next business day.'
								InputLabelProps={{ shrink: true }}
								fullWidth
								value={state?.order_cut_off_time}
								onChange={e => handleChange('order_cut_off_time', e.target.value)}
								disabled={+state?.delivery_estimate_options === 1}
							/>
							<TextField
								fullWidth
								variant='standard'
								label='Fulfillment offset days'
								title='Fulfillment offset days'
								placeholder='Fulfillment offset days, e.g. 2'
								helperText='The number of days the ship date needs to be moved to allow for the processing of the order.'
								InputLabelProps={{ shrink: true }}
								type='number'
								inputProps={{ min: 0, max: 99 }}
								value={state?.fulfillment_offset_days}
								onChange={e => {
									const val = e.target.value;
									if (val === '') {
										handleChange('fulfillment_offset_days', '');
										return;
									}
									const num = parseInt(val, 10);
									if (!isNaN(num) && num >= 0 && num <= 99) {
										handleChange('fulfillment_offset_days', String(num));
									}
								}}
								disabled={+state?.delivery_estimate_options === 1}
							/>
							<Typography
								variant='subtitle2'
								color={
									+state?.delivery_estimate_options === 1 ? 'dimgrey' : 'black'
								}>
								What days do you ship orders?
							</Typography>

							<FormControl component='fieldset'>
								<FormGroup aria-label='position' row>
									<FormControlLabel
										control={
											<Checkbox
												checked={state?.all_week_days_select}
												onChange={({ target: { checked } }) =>
													selectAllWeekDays(checked)
												}
												disabled={+state.delivery_estimate_options === 1}
											/>
										}
										label='Select all'
										title='Select all'
									/>
									{weekDaysMarkup()}
								</FormGroup>
							</FormControl>
						</Box>
					</Box>
				</Grid>
			</Grid>
		</>
	);
};

export default CutOffTime;