const lcjsTrader = require('@lightningchart/lcjs-trader')
const { ArrowType, 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 = 'column'
    exampleContainer.style.flexWrap = 'wrap'

    const chartContainer = document.createElement('div')
    chartContainer.style.height = 'calc(100% - 60px)'
    exampleContainer.append(chartContainer)

    const uiContainer = document.createElement('div')
    uiContainer.style.height = '60px'
    uiContainer.style.alignItems = 'center'
    uiContainer.style.paddingLeft = '20px'
    uiContainer.style.display = 'flex'
    uiContainer.style.flexDirection = 'row'
    uiContainer.style.flexWrap = 'wrap'
    uiContainer.style.columnGap = '20px'
    exampleContainer.append(uiContainer)

    const pointCountLabel = document.createElement('label')
    pointCountLabel.textContent = 'Point count: 0'
    uiContainer.append(pointCountLabel)

    const latestCloseLabel = document.createElement('label')
    latestCloseLabel.textContent = 'Latest Close: 0'
    uiContainer.append(latestCloseLabel)

    const minimumLabel = document.createElement('label')
    minimumLabel.textContent = 'X-axis minimum: 0'
    uiContainer.append(minimumLabel)

    const maximumLabel = document.createElement('label')
    maximumLabel.textContent = 'X-axis maximum: 10'
    uiContainer.append(maximumLabel)

    const lastClickXLabel = document.createElement('label')
    lastClickXLabel.textContent = 'Last click X: 0'
    uiContainer.append(lastClickXLabel)

    const lastClickYLabel = document.createElement('label')
    lastClickYLabel.textContent = 'Last click Y: 0'
    uiContainer.append(lastClickYLabel)

    // Create chart.
    const tradingChart = trader.tradingChart({ loadFromStorage: false, parentElement: chartContainer })
    tradingChart.setLatestValueLabelType(ValueLabelType.Line)

    uiContainer.style.backgroundColor = tradingChart.getInternalChart().getTheme().isDark ? '#101010' : '#EEF0EE'

    // Subscribe to various chart events.
    tradingChart.onDataModified((e) => {
        pointCountLabel.textContent = 'Point count: ' + e.pointCount
        latestCloseLabel.textContent = 'Latest close: ' + tradingChart.getData(false)[4][e.pointCount - 1].toFixed(2)
    })

    tradingChart.onXAxisRangeChanged((e) => {
        minimumLabel.textContent = 'X-axis minimum: ' + e.start.toFixed(2)
        maximumLabel.textContent = 'X-axis maximum: ' + e.end.toFixed(2)
    })

    tradingChart.onPointerDown((e) => {
        lastClickXLabel.textContent = 'Last click X: ' + e.axisX.toFixed(2)
        lastClickYLabel.textContent = 'Last click Y: ' + e.axisY.toFixed(2)
    })

    // Reading data from a file.
    await fetch(`${document.head.baseURI}examples/assets/0014/Microsoft Corporation (MSFT).csv`).then((res) => res.text()).then((text) => {
        tradingChart.loadCsvString(text, 'Microsoft Corporation (MSFT)')

        // Add two moving averages.
        const sma10 = tradingChart.indicators().addSimpleMovingAverage(10)
        sma10.setValueLabelType(ValueLabelType.Hidden)

        const sma20 = tradingChart.indicators().addSimpleMovingAverage(20)
        sma20.setLineColor('#60EE00')
        sma20.setValueLabelType(ValueLabelType.Hidden)

        // Add drawing tools and subscribe to their events.
        const upArrow = tradingChart.drawingTools().addArrow(38, 366)
        let upText = null
        upArrow.onPointerEnter((e) => {
            upText = tradingChart.drawingTools().addText(e.xPosition, upArrow.getPosition().y - 12,
            upArrow.getPosition().y == 366 ? 'SMAs cross -> Entry point' : 'Arrow moved to (' + upArrow.getPosition().x.toFixed(2) + ', ' + upArrow.getPosition().y.toFixed(2) + ')')
        })
        upArrow.onPointerLeave((e) => {
            if (upText != null) {
                upText.dispose()
                upText = null
            }
        })

        const downArrow = tradingChart.drawingTools().addArrow(120, 523)
        downArrow.setArrowType(ArrowType.DownArrow)
        let downText = null
        downArrow.onPointerEnter((e) => {
            downText = tradingChart.drawingTools().addText(e.xPosition, downArrow.getPosition().y + 12,
            downArrow.getPosition().y == 523 ? 'SMAs cross -> Exit point' : 'Arrow moved to (' + downArrow.getPosition().x.toFixed(2)  + ', ' + downArrow.getPosition().y.toFixed(2) + ')')
        })
        downArrow.onPointerLeave((e) => {
            if (downText != null) {
                downText.dispose()
                downText = null
            }
        })

        // Set interval to update latest data point.
        setInterval(() => {
            const currentData = tradingChart.getData(false)
            const len = currentData[0].length
            if (len > 0) {
                const newClose = currentData[4][len - 1] + Math.random() * 4 - 2
                tradingChart.updateLastDataPoint(
                    currentData[1][len - 1],
                    Math.max(newClose, currentData[2][len - 1]),
                    Math.min(newClose, currentData[3][len - 1]),
                    newClose
                )
            }
        }, 5000)
    })

    tradingChart.setCurrency('USD')
})