import { Box, Grid, MenuItem, Select, TextField, Typography } from '@mui/material';
import DESCRIPTIONS from '../constants/descriptions';

const options = [
	{ label: 'Cheapest', value: '1' },
	{ label: 'Cheapest Options', value: '2' },
	{ label: 'Average Rate', value: '3' },
];

const RatingMethod = ({ state, handleChange }) => {
	return (
		<>
			{/* Rating method */}
			<Grid container spacing={1} flex mt={3} mb={3}>
				<Grid item flex={1} xs={4}>
					<Typography variant='subtitle1' fontWeight='bold'>
						General
					</Typography>
					<p>
						<strong>Rating method</strong> -{' '}
						{DESCRIPTIONS.rating_methods[state?.rating_method]}
					</p>
					{state?.rating_method != 1 && (
						<p>
							<strong>Number of options</strong> - {DESCRIPTIONS.number_of_options}
						</p>
					)}
					{state?.rating_method != 2 && (
						<p>
							<strong>Label as</strong> - {DESCRIPTIONS.label_as}
						</p>
					)}
				</Grid>
				<Grid item flex={2} xs={8}>
					<Typography
						sx={{ fontSize: '12px', color: 'rgba(0,0,0,0.6)' }}
						htmlFor='rating_method'>
						Rating method
					</Typography>
					<Select
						fullWidth
						title='Rating method'
						size='small'
						defaultValue='1'
						value={state?.rating_method}
						onChange={e => handleChange('rating_method', e.target.value)}>
						{options.map(option => (
							<MenuItem key={option.value} value={option.value}>
								{option.label}
							</MenuItem>
						))}
					</Select>

					{/* Number of options */}
					{state?.rating_method != 1 && (
						<Box sx={{ mt: 3 }}>
							<Typography
								sx={{ fontSize: '12px', color: 'rgba(0,0,0,0.6)' }}
								htmlFor='number_of_options'>
								Number of options
							</Typography>
							<Select
								fullWidth
								title='Number of options'
								size='small'
								defaultValue='1'
								value={state?.number_of_options}
								onChange={e => handleChange('number_of_options', e.target.value)}>
								{Array.from({ length: 10 }, (_, i) => (
									<MenuItem key={i + 1} value={i + 1}>
										{i + 1}
									</MenuItem>
								))}
							</Select>
						</Box>
					)}

					{/* Label as */}
					{state?.rating_method != 2 && (
						<TextField
							label='Label as'
							title='Label as'
							variant='standard'
							helperText=''
							fullWidth
							sx={{ mt: 3 }}
							InputLabelProps={{ shrink: true }}
							value={state?.label_as}
							onChange={e => handleChange('label_as', e.target.value)}
						/>
					)}
				</Grid>
			</Grid>
		</>
	);
};

export default RatingMethod;