import React, { useEffect, useState } from 'react'
import './StarRating.scss'

const StarRating = ({ countStars=1, countActiveStars=1, color='#52B709', size=61 }) => {
	const [shadedStars, setShadedStars] = useState([])
	const [noShadedStars, setNoShadedStars] = useState([])
	const percent = (Math.abs(countActiveStars)) >= countStars ? 100 : (countActiveStars * 100 / countStars)
	useEffect(() => {
		for (let index = 0; index < countStars; index++) {
			setShadedStars(prev => [...prev, '★'])
			setNoShadedStars(prev => [...prev, '☆'])
		}
	}, [])

	const ratingStyle = {
		"--size": size+'px'
	}
	const activeStyle = {
		"--width": percent + '%',
		"--color": color,
		"--content": shadedStars.join('')
	}
	const bodyStyle = {
		"--content": noShadedStars.join(''),
		"--color": color
	}

	return (
		<div className='rating' style={ratingStyle}>
			<div className="rating__body" style={bodyStyle} data-content={noShadedStars.join('')}>
				<div className="rating__active" style={activeStyle} data-content={shadedStars.join('')}></div>
				<div className="rating__items">
					<input type='radio' className="rating__item" value={1} name='star'></input>
					<input type='radio' className="rating__item" value={2} name='star'></input>
					<input type='radio' className="rating__item" value={3} name='star'></input>
					<input type='radio' className="rating__item" value={4} name='star'></input>
					<input type='radio' className="rating__item" value={5} name='star'></input>
				</div>
			</div>
		</div>
	)
}

export default React.memo(StarRating);