@props([
    'symbol' => 'BTCUSD',
    'interval' => 'D',
    'theme' => 'dark',
])

@php
    $frameId = 'tv-advanced-'.uniqid();

    $baseConfig = [
        'symbol' => $symbol,
        'interval' => $interval,
        'timezone' => 'Etc/UTC',
        'style' => '1',
        'locale' => 'en',
        'width' => '100%',
        'height' => '100%',
        'autosize' => true,
        'allow_symbol_change' => false,
        'hide_side_toolbar' => false,
        'withdateranges' => true,
        'save_image' => true,
        'calendar' => false,
        'hide_volume' => false,
    ];
@endphp

<div class="vpm-trading-room-chart vpm-trading-room-chart--advanced" data-vpm-trading-room-chart>
    <iframe
        id="{{ $frameId }}"
        class="vpm-trading-room-chart__iframe"
        title="{{ $symbol }} chart"
        scrolling="no"
        allowtransparency="true"
        frameborder="0"
        loading="lazy"
        allowfullscreen
    ></iframe>
</div>

<script>
(function () {
    var frame = document.getElementById(@json($frameId));
    if (!frame) return;

    var base = @json($baseConfig);

    function currentTheme() {
        return document.documentElement.getAttribute('data-theme') === 'light' ? 'light' : 'dark';
    }

    function build() {
        var isDark = currentTheme() === 'dark';
        var config = Object.assign({}, base, {
            theme: isDark ? 'dark' : 'light',
            toolbar_bg: isDark ? '#131722' : '#ffffff',
            backgroundColor: isDark ? '#131722' : '#ffffff',
        });
        frame.src = 'https://www.tradingview-widget.com/embed-widget/advanced-chart/?locale=en&_=' + Date.now()
            + '#' + encodeURIComponent(JSON.stringify(config));
    }

    build();
    window.addEventListener('vpm:theme-change', build);
})();
</script>