<?php

declare(strict_types=1);

use Fisharebest\Webtrees\I18N;

/**
 * @var string       $chart_color2
 * @var string       $chart_color3
 * @var string       $chart_title
 * @var array<array> $data
 * @var string       $language
 * @var string       $region
 */

$id   = 'google-chart-' . bin2hex(random_bytes(8));
$name = 'callback_' . bin2hex(random_bytes(12));
?>

<?php if (count($data) === 1) : ?>
    <?= I18N::translate('This information is not available.') ?>
<?php else : ?>
    <div class="mb-3">
        <div class="card-deck">
            <div class="col-12 mb-3">
                <div class="card m-0">
                    <div class="card-header">
                        <?= $chart_title ?>
                    </div>
                    <div class="card-body">
                        <div id="<?= $id ?>" title="<?= $chart_title ?>"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>

    let <?= $name ?> = function () {
        statistics.drawGeoChart(
            <?= json_encode($id) ?>,
            <?= json_encode($data) ?>,
            {
                title: <?= json_encode($chart_title) ?>,
                region: <?= json_encode($region) ?>,
                colorAxis: {
                    colors: [
                        <?= json_encode('#' . $chart_color3) ?>,
                        <?= json_encode('#' . $chart_color2) ?>
                    ]
                }
            }
        );
    };

    if (document.readyState === "complete"
        || (document.readyState !== "loading" && !document.documentElement.doScroll)
    ) {
        statistics.init(<?= json_encode($language) ?>);
        statistics.addCallback(<?= $name ?>);
    } else {
        document.addEventListener("DOMContentLoaded", function () {
            statistics.init(<?= json_encode($language) ?>);
            statistics.addCallback(<?= $name ?>);
        });
    }

    </script>
<?php endif; ?>
