@props([
    'symbol' => 'BINANCE:BTCUSDT',
    'interval' => '60',
    'height' => '100%',
    'id' => 'vpm_tradingview_chart',
])

<div class="vpm-tv-chart" style="height: {{ is_numeric($height) ? $height.'px' : $height }};" data-vpm-tv-chart data-tv-symbol="{{ $symbol }}" data-tv-interval="{{ $interval }}">
    <div id="{{ $id }}" class="vpm-tv-chart__inner" role="img" aria-label="TradingView chart for {{ $symbol }}"></div>
</div>

@once
@push('scripts')
<script src="https://s3.tradingview.com/tv.js" defer></script>
@endpush
@endonce

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    var wrap = document.querySelector('[data-vpm-tv-chart]');
    if (!wrap) return;
    var containerId = @json($id);
    var symbol = wrap.dataset.tvSymbol;
    var interval = wrap.dataset.tvInterval;
    var widget = null;

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

    function overrides(t) {
        if (t === 'light') {
            return {
                'paneProperties.background': '#f4f7fc',
                'paneProperties.backgroundType': 'solid',
                'paneProperties.vertGridProperties.color': '#dce3ef',
                'paneProperties.horzGridProperties.color': '#dce3ef',
                'scalesProperties.textColor': '#5a6270',
            };
        }
        return {
            'paneProperties.background': '#131722',
            'paneProperties.backgroundType': 'solid',
            'paneProperties.vertGridProperties.color': '#363a45',
            'paneProperties.horzGridProperties.color': '#363a45',
            'scalesProperties.textColor': '#787b86',
        };
    }

    function mount() {
        if (typeof TradingView === 'undefined') {
            setTimeout(mount, 120);
            return;
        }
        var el = document.getElementById(containerId);
        if (!el) return;
        el.innerHTML = '';
        var t = theme();
        widget = new TradingView.widget({
            autosize: true,
            symbol: symbol,
            interval: interval,
            timezone: 'Etc/UTC',
            theme: t,
            style: '1',
            locale: 'en',
            toolbar_bg: t === 'light' ? '#ffffff' : '#1e222d',
            enable_publishing: false,
            allow_symbol_change: true,
            hide_side_toolbar: false,
            container_id: containerId,
            overrides: overrides(t),
        });
    }

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