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'

    // Add Horizontal Line to indicate the start closing value.
    const startLine = tradingChart.drawingTools().addHorizontalLine(0)
    startLine.setLineColor('#60FF00')
    startLine.setLineWidth(1)
    startLine.onPointerEnter((e) => {
        const firstClose = tradingChart.getData(false)[4][0]
        const lastClose = tradingChart.getData(false)[4][tradingChart.getData(false)[4].length - 1]
        priceChangeText.setTextColor(lastClose >= firstClose ? '#60FF00' : '#FF2020')
        priceChangeText.updatePosition({ x: e.xPosition, y: firstClose + 6 })
        priceChangeText.setText('Price change: ' + (lastClose - firstClose).toFixed(2))
        textVisible = true
    })
    startLine.onPointerLeave((e) => {
        priceChangeText.updatePosition({ x: 0, y: 0 })
        priceChangeText.setText('')
        textVisible = false
    })

    // Add Text to indicate the current price change.
    const priceChangeText = tradingChart.drawingTools().addText(0, 0, '')
    let textVisible = false

    // Subscribe to various chart events.
    tradingChart.onDataModified((e) => {
        const firstClose = tradingChart.getData(false)[4][0]
        const lastClose = tradingChart.getData(false)[4][tradingChart.getData(false)[4].length - 1]

        pointCountLabel.textContent = 'Point count: ' + e.pointCount
        latestCloseLabel.textContent = 'Latest close: ' + lastClose.toFixed(2)
        startLine.updatePosition(firstClose)
        if (textVisible) {
            priceChangeText.setTextColor(lastClose >= firstClose ? '#60FF00' : '#FF2020')
            priceChangeText.setText('Price change: ' + (lastClose - firstClose).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) => {
            const xDate = tradingChart.convertIndexToDateTime(Math.round(upArrow.getPosition().x))
            upText = tradingChart.drawingTools().addText(e.xPosition, upArrow.getPosition().y - 12,
            xDate == '2025-04-23' ? '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) => {
            const xDate = tradingChart.convertIndexToDateTime(Math.round(downArrow.getPosition().x))
            downText = tradingChart.drawingTools().addText(e.xPosition, downArrow.getPosition().y + 12,
            xDate == '2025-08-20' ? '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() * 6 - 3
                tradingChart.updateLastDataPoint(
                    currentData[1][len - 1],
                    Math.max(newClose, currentData[2][len - 1]),
                    Math.min(newClose, currentData[3][len - 1]),
                    newClose
                )
                startLine.setLineColor(newClose >= currentData[4][0] ? '#60FF00' : '#FF2020')
            }
        }, 5000)
    })

    tradingChart.setCurrency('USD')
})