import { useEffect, useState } from "react";
import NumberInput from "../input/NumberInput";

export default function RatingSelector({
	rating,
	onChange
}:{
	rating?: number;
	onChange?: (rating?: number) => void;
}){
	const ratings = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
	const selectorId = crypto.randomUUID().replaceAll("-", "");
	const [ currentRating, setCurrentRating ] = useState(rating);


	useEffect(() => {
		setCurrentRating(rating);
	}, [ rating, setCurrentRating ]);

	useEffect(() => {
		onChange?.(currentRating);
	}, [ currentRating, onChange ]);


	return (
		<div>
			<NumberInput
				id={`characterRatingSelector${selectorId}`}
				label="Rating"
				value={currentRating}
				onChange={(value) => setCurrentRating(value)}
				min={0}
				max={10}
			/>
		</div>
	);

	return (
		<div>
			<label>
				<select
					onChange={(e) => setCurrentRating(parseInt(e.target.value))}
					value={currentRating}
				>
					<option value={undefined}></option>
					{
						ratings.map((rating) => (
							<option
								key={rating}
								value={rating}
							>
								{rating}
							</option>
						))
					}
				</select>
				<span>Character Rating</span>
			</label>
		</div>
	);
}