import { Datafeeds, TradingView } from '@traders/use-react-tradingview'
import { useEffect, useRef } from 'react'

const targetElementId = 'tradingview-container'

export const Page = () => {
  const targetElement = useRef<HTMLDivElement>(null)

  useEffect(() => {
    if (!targetElement.current) return

    new TradingView.widget({
      fullscreen: true,
      symbol: 'AAPL',
      interval: '1D' as TradingView.ResolutionString,
      container: targetElementId,
      // BEWARE: no trailing slash is expected in feed URL
      datafeed: new Datafeeds.UDFCompatibleDatafeed('https://demo-feed-data.tradingview.com', undefined, {
        maxResponseLength: 1000,
        expectedOrder: 'latestFirst',
      }),
      library_path: 'charting-library-v28/',
      locale: 'zh_TW',

      disabled_features: [
        'use_localstorage_for_settings',
        'left_toolbar',
        'header_widget',
        'timeframes_toolbar',
        'edit_buttons_in_legend',
        'context_menus',
        'control_bar',
        'border_around_the_chart',
      ],
      overrides: {
        'paneProperties.background': '#222222',
        'paneProperties.vertGridProperties.color': '#454545',
        'paneProperties.horzGridProperties.color': '#454545',
        'scalesProperties.textColor': '#AAA',
      },
    })
  }, [])

  return (
    <div
      ref={targetElement}
      id={targetElementId}
    >
      Tradingview Charting is loading...
    </div>
  )
}