const lcjsTrader = require('@lightningchart/lcjs-trader')
const lcjs = require('@lightningchart/lcjs')
const { PriceChartType } = lcjsTrader

lcjsTrader.trader(TRADER_LICENSE).then(async (trader) => {
    const exampleContainer = document.getElementById('chart') || document.body
    if (exampleContainer === document.body) {
        exampleContainer.style.width = '100vw'
        exampleContainer.style.height = '100vh'
        exampleContainer.style.margin = '0px'
    }
    exampleContainer.style.display = 'flex'
    exampleContainer.style.flexDirection = 'row'
    exampleContainer.style.flexWrap = 'wrap'

    const containerCandles = document.createElement('div')
    containerCandles.style.width = '25%'
    containerCandles.style.height = '50%'
    exampleContainer.append(containerCandles)

    const containerBars = document.createElement('div')
    containerBars.style.width = '25%'
    containerBars.style.height = '50%'
    exampleContainer.append(containerBars)

    const containerLine = document.createElement('div')
    containerLine.style.width = '25%'
    containerLine.style.height = '50%'
    exampleContainer.append(containerLine)

    const containerMountain = document.createElement('div')
    containerMountain.style.width = '25%'
    containerMountain.style.height = '50%'
    exampleContainer.append(containerMountain)

    const containerHeikinAshi = document.createElement('div')
    containerHeikinAshi.style.width = '25%'
    containerHeikinAshi.style.height = '50%'
    exampleContainer.append(containerHeikinAshi)

    const containerRenko = document.createElement('div')
    containerRenko.style.width = '25%'
    containerRenko.style.height = '50%'
    exampleContainer.append(containerRenko)

    const containerKagi = document.createElement('div')
    containerKagi.style.width = '25%'
    containerKagi.style.height = '50%'
    exampleContainer.append(containerKagi)

    const containerPointFigure = document.createElement('div')
    containerPointFigure.style.width = '25%'
    containerPointFigure.style.height = '50%'
    exampleContainer.append(containerPointFigure)

    // Create a trading chart and setting the price chart type.
    const candleChart = trader.tradingChart({ parentElement: containerCandles, loadFromStorage: false })
    candleChart.setPriceChartType(PriceChartType.CandleStick)
    candleChart.showToolbar(false)

    const barChart = trader.tradingChart({ parentElement: containerBars, loadFromStorage: false })
    barChart.setPriceChartType(PriceChartType.Bar)
    barChart.showToolbar(false)

    const lineChart = trader.tradingChart({ parentElement: containerLine, loadFromStorage: false })
    lineChart.setPriceChartType(PriceChartType.Line)
    lineChart.showToolbar(false)

    const mountainChart = trader.tradingChart({ parentElement: containerMountain, loadFromStorage: false })
    mountainChart.setPriceChartType(PriceChartType.Mountain)
    mountainChart.showToolbar(false)

    const heikinAshiChart = trader.tradingChart({ parentElement: containerHeikinAshi, loadFromStorage: false })
    heikinAshiChart.setPriceChartType(PriceChartType.HeikinAshi)
    heikinAshiChart.showToolbar(false)

    const renkoChart = trader.tradingChart({ parentElement: containerRenko, loadFromStorage: false })
    renkoChart.setPriceChartType(PriceChartType.Renko)
    renkoChart.showToolbar(false)

    const kagiChart = trader.tradingChart({ parentElement: containerKagi, loadFromStorage: false })
    kagiChart.setPriceChartType(PriceChartType.Kagi)
    kagiChart.showToolbar(false)

    const pointFigureChart = trader.tradingChart({ parentElement: containerPointFigure, loadFromStorage: false })
    pointFigureChart.setPriceChartType(PriceChartType.PointAndFigure)
    pointFigureChart.showToolbar(false)

    // Reading data from a file.
    await fetch(`${document.head.baseURI}examples/assets/0007/Alphabet Inc (GOOGL).csv`).then((res) => res.text()).then((text) => {
        candleChart.loadCsvString(text, 'Candles')
        barChart.loadCsvString(text, 'Bars')
        lineChart.loadCsvString(text, 'Line')
        mountainChart.loadCsvString(text, 'Mountain')
        heikinAshiChart.loadCsvString(text, 'Heikin Ashi')
        renkoChart.loadCsvString(text, 'Renko')
        kagiChart.loadCsvString(text, 'Kagi')
        pointFigureChart.loadCsvString(text, 'Point & Figure')
    })
})