<?php
/** @var $block \Magento\Catalog\Block\Product\AbstractProduct */
$csProductHelper = $this->helper('Creativestyle\FrontendExtension\Helper\Product');
$rating = $csProductHelper->getReviewSummary($block->getProduct(), true);
$ratingData = $rating["data"];
$votes = $rating["data"]["votes"];
$allVotes = array_sum($votes);
?>

<?php if($allVotes > 0): ?>

<div class="cs-reviews-summary">
    <div class="cs-reviews-summary__stars">
        <div class="cs-reviews-summary__note">
            <span class="cs-reviews-summary__note-left"><?php echo $ratingData['activeStars'] ?></span><span
                class="cs-reviews-summary__note-right"> / <?php echo $ratingData['maxStars'] ?></span>
        </div>

        <?= $this->getLayout()->createBlock('Creativestyle\FrontendExtension\Block\Twig', 'grid-product-rating--', [
                'data' => [
                    'namespace' => 'cs-',
                    'maxStars' => $ratingData['maxStars'],
                    'activeStars' => $ratingData['activeStars'],
                    'mix' => 'cs-star-rating--big'
                ]
            ]
        )->setTemplate("star-rating/star-rating.twig")->toHtml() ?>

        <button class="cs-reviews-summary__button | cs-button cs-button--look_light cs-button--type_wide-mobile">
            <span class="cs-button__span"> <?php /* @escapeNotVerified */  echo __('Add Review') ?></span>
            <svg class="cs-button__icon">
                <use xlink:href="#arrow_next"></use>
            </svg>
        </button>
    </div>

    <ul class="cs-reviews-summary__bars">
        <?php for ($ratingIndex = count($votes), $ratingSteps = 1; $ratingIndex >= $ratingSteps; $ratingIndex--):
            $ratingLabel = $ratingIndex;
            $ratingLabel .= ' ' . ($ratingIndex == 1 ? __('star') : __('stars'));
            $numOfVotes = $votes[$ratingIndex];
            $votesPercentage = ceil($numOfVotes * 100 / $allVotes);
        ?>
            <li class="cs-reviews-summary__bar">
                <span class="cs-reviews-summary__bar-label"><?= $ratingLabel; ?></span>
                <span class="cs-reviews-summary__bar-progress">
                    <span class="cs-reviews-summary__bar-progress-inner" style="width:<?= $votesPercentage; ?>%;"></span>
                </span>
                <span class="cs-reviews-summary__bar-label"><?= $numOfVotes; ?></span>
            </li>
        <?php endfor; ?>
    </ul>
</div>

<script>
    require([
        'jquery'
    ], function($) {
        $('.cs-reviews-summary__button').on('click', function(event) {
            event.preventDefault();
            var href = $(this).find('a').attr('href');
            var target = ('#review-form');
            if ($(window).width() < 1024) {
                $('html, body').animate({
                    scrollTop: $(target).offset().top - $('.cs-header__content').height()
                }, 350);
            } else {
                $('html, body').animate( {
                    scrollTop: $(target).offset().top
                }, 350);
            }
        });
    });
</script>

<?php endif; ?>
