@props([
    'symbol' => 'AAPL',
    'theme' => 'dark',
])

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

    $baseConfig = [
        'symbol' => $symbol,
        'width' => '100%',
        'locale' => 'en',
        'isTransparent' => false,
    ];
@endphp

<div class="vpm-trading-room-chart vpm-trading-room-chart--info" data-vpm-trading-room-chart>
    <iframe
        id="{{ $frameId }}"
        class="vpm-trading-room-chart__iframe"
        title="symbol info TradingView widget"
        scrolling="no"
        allowtransparency="true"
        frameborder="0"
        loading="lazy"
        allowfullscreen
    ></iframe>
    @include('partials.vpm.tradingview-copyright', [
        'symbol' => $symbol,
        'label' => strtoupper(preg_replace('/^.*:/', '', $symbol)).' Profile ',
        'hidden' => true,
    ])
</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 config = Object.assign({}, base, {
            colorTheme: currentTheme() === 'dark' ? 'dark' : 'light',
        });
        frame.src = 'https://www.tradingview-widget.com/embed-widget/symbol-info/?locale=en&_=' + Date.now()
            + '#' + encodeURIComponent(JSON.stringify(config));
    }

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