import React, {useState} from 'react';
import {Data} from '../../models/game'
import Rating from 'react-rating'
import agent from "../../api/agent";
import {Flex, Link} from "@chakra-ui/react";
import {IoGameController, IoGameControllerOutline} from "react-icons/io5";
import {BiReset} from "react-icons/bi";


interface Props {
    game: Data
    size: string
}

const GameRating = ({game, size}: Props) => {
    const steamRating = game.steamRating
    const [rating, setRating] = useState(game.accessedBy[0].rating);

    const handleClick = async (rating: number) => {
        try {
            setRating(rating)
            await agent.Games.rating(game._id, {
                accessedBy: [{
                    rating
                }]
            })
        } catch (err) {
            console.error(err)
        }
    }

    const finalRating = rating === 0 ? steamRating : rating

    return (
        <Flex>
            {/*@ts-ignore*/}
            <Rating
                start={0}
                stop={10}
                step={2}
                fractions={2}
                onClick={handleClick}
                initialRating={finalRating}
                emptySymbol={<IoGameControllerOutline size={size}/>}
                fullSymbol={<IoGameController size={size} color={rating === 0 ? '#2761A7' : '#64ABDE'}/>}
            />
            <Link mt={'1'} ml={'1.5'} onMouseDown={() => handleClick(0)}><BiReset /></Link>
        </Flex>
    )
};

export default GameRating;
