import cn from "classnames";

import styles from "./StarRating.module.scss";

interface RatingStarProps {
	id: string;
	delayIndex: number;
}

interface RatingRadioProps {
	id: string;
}

interface StarRatingAnimationProps {
	name?: string;
	legend?: string;
	className?: string;
}

const RatingStar = ({ id, delayIndex }: RatingStarProps) => (
	<label
		className={cn(styles.rating__label, styles[`rating__label-${id}`], styles[`rating__label--delay${delayIndex}`])}
		htmlFor={`rating-${id}`}
	>
		<span className={styles.srOnly}>{id} stars</span>
		<svg className={styles.rating__star} width="32" height="32" viewBox="0 0 32 32" aria-hidden="true">
			<g stroke="#C3CCD9" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
				<g transform="translate(16,16) rotate(180)">
					<polygon
						className={styles["rating__star-stroke"]}
						points="0,15 4.41,6.07 14.27,4.64 7.13,-2.32 8.82,-12.14 0,-7.5 -8.82,-12.14 -7.13,-2.32 -14.27,4.64 -4.41,6.07"
						fill="none"
					/>
					<polygon
						className={styles["rating__star-fill"]}
						points="0,15 4.41,6.07 14.27,4.64 7.13,-2.32 8.82,-12.14 0,-7.5 -8.82,-12.14 -7.13,-2.32 -14.27,4.64 -4.41,6.07"
						fill="none"
					/>
				</g>
				<g transform="translate(16,16)" strokeDasharray="12 12" strokeDashoffset="12">
					<polyline className={styles["rating__star-line"]} transform="rotate(0)" points="0 4,0 16" />
					<polyline className={styles["rating__star-line"]} transform="rotate(72)" points="0 4,0 16" />
					<polyline className={styles["rating__star-line"]} transform="rotate(144)" points="0 4,0 16" />
					<polyline className={styles["rating__star-line"]} transform="rotate(216)" points="0 4,0 16" />
					<polyline className={styles["rating__star-line"]} transform="rotate(288)" points="0 4,0 16" />
				</g>
			</g>
		</svg>
	</label>
);

const RatingRadio = ({ id }: RatingRadioProps) => (
	<input
		id={`rating-${id}`}
		className={cn(styles.rating__input, styles[`rating__input-${id}`])}
		type="radio"
		name="rating"
		value={id}
	/>
);

export const StarRatingAnimation = ({ name = "rating", legend = "Star rating", className }: StarRatingAnimationProps) => {
	const ratings = ["1", "2", "3", "4", "5"];

	return (
		<fieldset className={cn(styles.rating, className)}>
			<legend className={cn(styles.rating__legend, styles.srOnly)}>{legend}</legend>
			{ratings.map((id) => (
				<RatingRadio key={`radio-${id}`} id={id} />
			))}
			{ratings.map((id, index) => (
				<RatingStar key={`star-${id}`} id={id} delayIndex={index} />
			))}
		</fieldset>
	);
};