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

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

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

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

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

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

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

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

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

    // Create a trading chart and adding an envelope indicator to it.
    const bollingerChart = trader.tradingChart({ parentElement: containerBollinger, loadFromStorage: false })
    bollingerChart.setPriceChartType(PriceChartType.Bar)
    const bb = bollingerChart.indicators().addBollingerBand()
    bb.setStandardDeviationNumber(2.5)
    bb.setValueLabelType(ValueLabelType.Line)
    bollingerChart.changeTimeRange(5)
    bollingerChart.showToolbar(false)

    const donchianChart = trader.tradingChart({ parentElement: containerDonchian, loadFromStorage: false })
    donchianChart.setPriceChartType(PriceChartType.Bar)
    const donchian = donchianChart.indicators().addDonchianChannels()
    donchian.setMidLineColor('#AAFF00')
    donchian.setValueLabelType(ValueLabelType.Line)
    donchianChart.changeTimeRange(5)
    donchianChart.showToolbar(false)

    const fractalChaosChart = trader.tradingChart({ parentElement: containerFractalChaos, loadFromStorage: false })
    fractalChaosChart.setPriceChartType(PriceChartType.Bar)
    const fcb = fractalChaosChart.indicators().addFractalChaosBands()
    fcb.setLineWidth(1.5)
    fcb.setValueLabelType(ValueLabelType.Line)
    fractalChaosChart.changeTimeRange(5)
    fractalChaosChart.showToolbar(false)

    const highLowChart = trader.tradingChart({ parentElement: containerHighLow, loadFromStorage: false })
    highLowChart.setPriceChartType(PriceChartType.Bar)
    const hlb = highLowChart.indicators().addHighLowBands()
    hlb.setFillColor('#80FFFF20')
    hlb.setValueLabelType(ValueLabelType.Line)
    highLowChart.changeTimeRange(5)
    highLowChart.showToolbar(false)

    const keltnerChart = trader.tradingChart({ parentElement: containerKeltner, loadFromStorage: false })
    keltnerChart.setPriceChartType(PriceChartType.Bar)
    const keltner = keltnerChart.indicators().addKeltnerChannels()
    keltner.setFillEnabled(false)
    keltner.setValueLabelType(ValueLabelType.Line)
    keltnerChart.changeTimeRange(5)
    keltnerChart.showToolbar(false)

    const maeChart = trader.tradingChart({ parentElement: containerMAE, loadFromStorage: false })
    maeChart.setPriceChartType(PriceChartType.Bar)
    const mae = maeChart.indicators().addMovingAverageEnvelopes()
    mae.setMovingAverageType(MovingAverageType.VolumeWeightedMovingAverage)
    mae.setValueLabelType(ValueLabelType.Line)
    maeChart.changeTimeRange(5)
    maeChart.showToolbar(false)

    const primeNumberChart = trader.tradingChart({ parentElement: containerPrimeNumber, loadFromStorage: false })
    primeNumberChart.setPriceChartType(PriceChartType.Bar)
    const pnb = primeNumberChart.indicators().addPrimeNumberBands()
    pnb.setLineColor('#55CCAA')
    pnb.setValueLabelType(ValueLabelType.Line)
    primeNumberChart.changeTimeRange(5)
    primeNumberChart.showToolbar(false)

    const standardErrorChart = trader.tradingChart({ parentElement: containerStandardError, loadFromStorage: false })
    standardErrorChart.setPriceChartType(PriceChartType.Bar)
    const seb = standardErrorChart.indicators().addStandardErrorBands()
    seb.setMultiplier(5)
    seb.setValueLabelType(ValueLabelType.Line)
    standardErrorChart.changeTimeRange(5)
    standardErrorChart.showToolbar(false)

    const starcChart = trader.tradingChart({ parentElement: containerSTARC, loadFromStorage: false })
    starcChart.setPriceChartType(PriceChartType.Bar)
    const starc = starcChart.indicators().addStollerAverageRangeChannel()
    starc.setSource(Source.Hlcc4)
    starc.setValueLabelType(ValueLabelType.Line)
    starcChart.changeTimeRange(5)
    starcChart.showToolbar(false)

    // Reading data from a file.
    await fetch(`${document.head.baseURI}examples/assets/0009/Kellanova Company (K).csv`).then((res) => res.text()).then((text) => {
        bollingerChart.loadCsvString(text, 'Bollinger Band')
        donchianChart.loadCsvString(text, 'Donchian Channels')
        fractalChaosChart.loadCsvString(text, 'Fractal Chaos Bands')
        highLowChart.loadCsvString(text, 'High Low Bands')
        keltnerChart.loadCsvString(text, 'Keltner Channels')
        maeChart.loadCsvString(text, 'Moving Average Envelopes')
        primeNumberChart.loadCsvString(text, 'Prime Number Bands')
        standardErrorChart.loadCsvString(text, 'Standard Error Bands')
        starcChart.loadCsvString(text, 'Stoller Average Range channel')
    })
})