const lcjsTrader = require('@lightningchart/lcjs-trader')
const { ValueLabelType } = 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 containerEMA = document.createElement('div')
    containerEMA.style.width = '33.33%'
    containerEMA.style.height = '33.33%'
    exampleContainer.append(containerEMA)

    const containerSMA = document.createElement('div')
    containerSMA.style.width = '33.33%'
    containerSMA.style.height = '33.33%'
    exampleContainer.append(containerSMA)

    const containerTMA = document.createElement('div')
    containerTMA.style.width = '33.33%'
    containerTMA.style.height = '33.33%'
    exampleContainer.append(containerTMA)

    const containerTSMA = document.createElement('div')
    containerTSMA.style.width = '33.33%'
    containerTSMA.style.height = '33.33%'
    exampleContainer.append(containerTSMA)

    const containerVIDYA = document.createElement('div')
    containerVIDYA.style.width = '33.33%'
    containerVIDYA.style.height = '33.33%'
    exampleContainer.append(containerVIDYA)

    const containerVMA = document.createElement('div')
    containerVMA.style.width = '33.33%'
    containerVMA.style.height = '33.33%'
    exampleContainer.append(containerVMA)

    const containerVWMA = document.createElement('div')
    containerVWMA.style.width = '33.33%'
    containerVWMA.style.height = '33.34%'
    exampleContainer.append(containerVWMA)

    const containerWMA = document.createElement('div')
    containerWMA.style.width = '33.33%'
    containerWMA.style.height = '33.34%'
    exampleContainer.append(containerWMA)

    const containerWWS = document.createElement('div')
    containerWWS.style.width = '33.33%'
    containerWWS.style.height = '33.34%'
    exampleContainer.append(containerWWS)

    // Creating trading chart and adding one moving average per chart.
    const emaChart = trader.tradingChart({ parentElement: containerEMA, loadFromStorage: false })
    emaChart.indicators().addExponentialMovingAverage(10).setValueLabelType(ValueLabelType.Line)
    const ema20 = emaChart.indicators().addExponentialMovingAverage(20)
    ema20.setLineColor('#FFAAFF')
    ema20.setValueLabelType(ValueLabelType.Line)
    emaChart.changeTimeRange(5)
    emaChart.showToolbar(false)

    const smaChart = trader.tradingChart({ parentElement: containerSMA, loadFromStorage: false })
    smaChart.indicators().addSimpleMovingAverage(10).setValueLabelType(ValueLabelType.Line)
    const sma20 = smaChart.indicators().addSimpleMovingAverage(20)
    sma20.setLineColor('#CCFFAA')
    sma20.setValueLabelType(ValueLabelType.Line)
    smaChart.changeTimeRange(5)
    smaChart.showToolbar(false)

    const tmaChart = trader.tradingChart({ parentElement: containerTMA, loadFromStorage: false })
    tmaChart.indicators().addTriangularMovingAverage(10).setValueLabelType(ValueLabelType.Line)
    const tma20 = tmaChart.indicators().addTriangularMovingAverage(20)
    tma20.setLineColor('#AAAAFF')
    tma20.setValueLabelType(ValueLabelType.Line)
    tmaChart.changeTimeRange(5)
    tmaChart.showToolbar(false)

    const tsmaChart = trader.tradingChart({ parentElement: containerTSMA, loadFromStorage: false })
    tsmaChart.indicators().addTimeSeriesMovingAverage(10).setValueLabelType(ValueLabelType.Line)
    const tsma20 = tsmaChart.indicators().addTimeSeriesMovingAverage(20)
    tsma20.setLineColor('#AAAAFF')
    tsma20.setValueLabelType(ValueLabelType.Line)
    tsmaChart.changeTimeRange(5)
    tsmaChart.showToolbar(false)

    const vidyaChart = trader.tradingChart({ parentElement: containerVIDYA, loadFromStorage: false })
    vidyaChart.indicators().addVIDYA(10).setValueLabelType(ValueLabelType.Line)
    const vidya20 = vidyaChart.indicators().addVIDYA(20)
    vidya20.setLineColor('#AAFFFF')
    vidya20.setValueLabelType(ValueLabelType.Line)
    vidyaChart.changeTimeRange(5)
    vidyaChart.showToolbar(false)

    const vmaChart = trader.tradingChart({ parentElement: containerVMA, loadFromStorage: false })
    vmaChart.indicators().addVariableMovingAverage(10).setValueLabelType(ValueLabelType.Line)
    const vma20 = vmaChart.indicators().addVariableMovingAverage(20)
    vma20.setLineColor('#AAAAAA')
    vma20.setValueLabelType(ValueLabelType.Line)
    vmaChart.changeTimeRange(5)
    vmaChart.showToolbar(false)

    const vwmaChart = trader.tradingChart({ parentElement: containerVWMA, loadFromStorage: false })
    vwmaChart.indicators().addVolumeWeightedMovingAverage(10).setValueLabelType(ValueLabelType.Line)
    const vwam20 = vwmaChart.indicators().addVolumeWeightedMovingAverage(20)
    vwam20.setLineColor('#AAAAAA')
    vwam20.setValueLabelType(ValueLabelType.Line)
    vwmaChart.changeTimeRange(5)
    vwmaChart.showToolbar(false)

    const wmaChart = trader.tradingChart({ parentElement: containerWMA, loadFromStorage: false })
    wmaChart.indicators().addWeightedMovingAverage(10).setValueLabelType(ValueLabelType.Line)
    const wma20 = wmaChart.indicators().addWeightedMovingAverage(20)
    wma20.setLineColor('#AAFFFF')
    wma20.setValueLabelType(ValueLabelType.Line)
    wmaChart.changeTimeRange(5)
    wmaChart.showToolbar(false)

    const wwsChart = trader.tradingChart({ parentElement: containerWWS, loadFromStorage: false })
    wwsChart.indicators().addWellesWilderSmoothingAverage(10).setValueLabelType(ValueLabelType.Line)
    const wws20 = wwsChart.indicators().addWellesWilderSmoothingAverage(20)
    wws20.setLineColor('#AAAAFF')
    wws20.setValueLabelType(ValueLabelType.Line)
    wwsChart.changeTimeRange(5)
    wwsChart.showToolbar(false)

    // Reading data from a file.
    await fetch(`${document.head.baseURI}examples/assets/0008/Ford Motor Company (F).csv`).then((res) => res.text()).then((text) => {
        emaChart.loadCsvString(text, 'Exponential Moving Average')
        smaChart.loadCsvString(text, 'Simple Moving Average')
        tmaChart.loadCsvString(text, 'Triangular Moving Average')
        tsmaChart.loadCsvString(text, 'Time Series Moving Average')
        vidyaChart.loadCsvString(text, 'Variable Index Dynamic Average')
        vmaChart.loadCsvString(text, 'Variable Moving Average')
        vwmaChart.loadCsvString(text, 'Volume-Weighted Moving Average')
        wmaChart.loadCsvString(text, 'Weighted Moving Average')
        wwsChart.loadCsvString(text, 'Welles Wilder\'s Smoothing')
    })
})