import React, { Component } from 'react';
import { logger } from '@shopgate/pwa-core/helpers';
import getConfig from '../getConfig';
import './style.css';
/**
 * @return {JSX}
 */
class ReviewDisplayLists extends Component {
    static get config() {
        return getConfig();
    }
    constructor() {
        super();
        this.getReviewFromApi = this.getReviewFromApi.bind(this);
        // set default rating
        this.state = {rating: 0};
    }
    componentDidMount() {
        this.getReviewFromApi();
    }
    // get rating from POWERREVIEWS API
    async getReviewFromApi() {
        try {
            let response = await fetch('//readservices-b2c.powerreviews.com/m/'+ this.constructor.config.merchantId +'/l/'+ this.constructor.config.locale +'/product/' + this.props.productId + '/reviews?image_only=false&apikey=' + this.constructor.config.apiKey, {cors: true});
            let responseJson = await response.json();
            if(responseJson.results[0].reviews.length > 0){
                this.setState({rating: responseJson.results[0].rollup.average_rating});
            }
        } catch(error) {
            console.error(error);
        }
    }
    // Generate stars
    createStar = () => {
        let star = '';
        for (let i = 0; i < 5; i++) {
            if(i < this.state.rating){
                if( (i + 0.5) == this.state.rating){
                    star += `<div role="radio" class="pr-star-v4-50-filled" aria-checked="false" tabindex="-1"></div>`;
                } else {
                    if((i + 0.5) < this.state.rating && (i + 1) > this.state.rating){
                        star += `<div role="radio" class="pr-star-v4-75-filled" aria-checked="false" tabindex="-1"></div>`;
                    } else {
                        if((i + 0.5) > this.state.rating && this.state.rating != i){
                            star += `<div role="radio" class="pr-star-v4-25-filled" aria-checked="false" tabindex="-1"></div>`;
                        } else {
                            star += `<div role="radio" class="pr-star-v4-100-filled" aria-checked="false" tabindex="-1"></div>`;
                        }
                    }
                }
            } else {
                star += `<div role="radio" class="pr-star-v4-0-filled" aria-checked="false" tabindex="-1"></div>`;
            }
        }
        return {__html: star};
    }

    render () {
        return (
            <div className="pr-snippet-stars-container-list" dangerouslySetInnerHTML={this.createStar()}></div>
        );
    }
}
export default ReviewDisplayLists;