import { Box, Grid, TextField, Typography, FormControlLabel, Checkbox } from '@mui/material';

const OwnArrangement = ({ 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'>
					Allow For Own Arrangement
				</Typography>
			</Grid>

			<Grid item flex={2} xs={8}>
				<FormControlLabel
					control={
						<Checkbox
							checked={state?.allow_own_arrangement || false}
							onChange={e => handleChange('allow_own_arrangement', e.target.checked)}
						/>
					}
					label='Adds an option in the shipping cart for users to indicate that they will make and pay for their own LTL shipping arrangements.'
					title='Adds an option in the shipping cart for users to indicate that they will make and pay for their own LTL shipping arrangements.'
				/>
			</Grid>

			<Grid item flex={1} xs={4}>
				<Typography variant='subtitle1' fontWeight='bold'>
					Text For Own Arrangement
				</Typography>
			</Grid>
			<Grid item flex={2} xs={8}>
				<Box component='form'>
					<Box component='div' sx={{ display: 'flex', flexDirection: 'column', gap: 3 }}>
						<TextField
							title='Text for own arrangement'
							variant='standard'
							InputLabelProps={{ shrink: true }}
							inputProps={{ maxLength: 100 }}
							disabled={!state?.allow_own_arrangement}
							fullWidth
							value={state?.own_arrangement_text}
							onChange={e => {
								handleChange('own_arrangement_text', e.target.value);
							}}
						/>
					</Box>
				</Box>
			</Grid>
		</Grid>
	);
};

export default OwnArrangement;