<script lang="ts">
    import StarRatting from "../star-rating/Stars.svelte";

    export let score

    let config = {
        readOnly: false,
        countStars: 5,
        range: {
            min: 0,
            max: 5,
            step: 0.5
        },
        score: score / 2,
        showScore: false,
        name: "rating",
        scoreFormat: function(){ return `(${this.score.toFixed(0)}/${this.countStars})` },
        starConfig: {
            size: 32,
            fillColor: '#F9ED4F',
            strokeColor: "#e2c714",
            unfilledColor: '#FFF',
            strokeUnfilledColor: '#000'
        }
    }

    const ratingInWords = {
        0: "Not Reviewed",
        1: "Appalling",
        2: "Horrible",
        3: "Very Bad",
        4: "Bad",
        5: "Average",
        6: "Fine",
        7: "Good",
        8: "Very Good",
        9: "Great",
        10: "Masterpiece",
    }

    const changeRating = (e: any) => {
        score = e.target.valueAsNumber * 2
    }
</script>

<div>
    <StarRatting bind:config on:change={changeRating}/>
    <p>Rating:  {config.score * 2}</p>
    <p>{ratingInWords[config.score * 2]}</p>
</div>
