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

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

    $baseConfig = [
        'symbols' => [[$displaySymbol, $tvSymbol.'|12M']],
        'chartOnly' => false,
        'width' => '100%',
        'height' => '100%',
        'locale' => 'en',
        'autosize' => true,
        'showVolume' => false,
        'showMA' => false,
        'hideDateRanges' => false,
        'hideMarketStatus' => false,
        'hideSymbolLogo' => false,
        'scalePosition' => 'right',
        'scaleMode' => 'Normal',
        'fontFamily' => '-apple-system, BlinkMacSystemFont, Trebuchet MS, Roboto, Ubuntu, sans-serif',
        'fontSize' => '10',
        'noTimeScale' => false,
        'valuesTracking' => '1',
        'changeMode' => 'price-and-percent',
        'chartType' => 'area',
        'lineWidth' => 2,
        'lineType' => 0,
        'dateRanges' => ['1d|1', '1m|30', '3m|60', '12m|1D', '60m|1W', 'all|1M'],
        'lineColor' => '#2962FF',
        'topColor' => 'rgba(41, 98, 255, 0.3)',
        'bottomColor' => 'rgba(41, 98, 255, 0)',
        'isTransparent' => false,
    ];
@endphp

<div class="vpm-trading-room-chart vpm-trading-room-chart--overview" data-vpm-trading-room-chart>
    <div class="vpm-trading-room-chart__body">
        <iframe
            id="{{ $frameId }}"
            class="vpm-trading-room-chart__iframe"
            title="{{ $displaySymbol }} TradingView widget"
            scrolling="no"
            allowtransparency="true"
            frameborder="0"
            loading="lazy"
            allowfullscreen
        ></iframe>
    </div>
    @include('partials.vpm.tradingview-copyright', ['symbol' => $displaySymbol])
</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, {
            colorTheme: isDark ? 'dark' : 'light',
            backgroundColor: isDark ? '#131722' : '#ffffff',
            gridLineColor: isDark ? 'rgba(54, 58, 69, 0.6)' : 'rgba(240, 243, 250, 1)',
            widgetFontColor: isDark ? '#D1D4DC' : '#131722',
        });
        frame.src = 'https://www.tradingview-widget.com/embed-widget/symbol-overview/?locale=en&_=' + Date.now()
            + '#' + encodeURIComponent(JSON.stringify(config));
    }

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