const lcjsTrader = require('@lightningchart/lcjs-trader')
const lcjs = require('@lightningchart/lcjs')
const { MovingAverageType, TechnicalAnalysisMethods } = lcjsTrader
const { ColorRGBA, emptyFill, emptyLine, formatLongitudeLatitude, LUT, PalettedFill, SolidFill, SolidLine } = lcjs

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 containerMapChart = document.createElement('div')
    containerMapChart.style.width = '50%'
    containerMapChart.style.height = '50%'
    exampleContainer.append(containerMapChart)

    const containerHeatmap = document.createElement('div')
    containerHeatmap.style.width = '50%'
    containerHeatmap.style.height = '50%'
    containerHeatmap.style.backgroundColor = '#002000'
    exampleContainer.append(containerHeatmap)

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

    // Creating and customizing the Map Chart.
    const mapChart = trader.lightningChart().Map({ container: containerMapChart })
    .setTitle('USD vs Most traded currencies')
    .setFillStyle(new PalettedFill({
        lut: new LUT({
            steps: [
                { value: 0, color: ColorRGBA( 0, 200, 0 )},
                { value: 50, color: ColorRGBA( 200, 200, 0 )},
                { value: 100, color: ColorRGBA( 200, 0, 0 )}
            ],
            interpolate: true,
            color: ColorRGBA( 0, 0, 30 )
        })
    }))
    .setCursorFormatting((_, hit) => {
        const result = [[hit.region.name], [formatLongitudeLatitude(hit.longitude, hit.latitude)]]
        if (hit.value) {
            result.push(['Value: ', hit.value.toString()])
        } else {
            result.push('Value: N/A')
        }
        return result
    })

    // Coloring the map based on currency values.
    fetch(`${document.head.baseURI}examples/assets/1101/currencyValues.json`).then((r) => r.json())
    .then((populationData) => {
        // Format is:
        // Array<{ "Country Code": string, "Value": number }>
        const regionValuesData = populationData.map((item) => ({
            ISO_A3: item['Country Code'],
            value: item['Value'],
        }))
        mapChart.invalidateRegionValues(regionValuesData)
    })

    // Creating the chart for the heatmap.
    const heatmapChart = trader.lightningChart().ChartXY({ container: containerHeatmap })
    .setTitle('Aroon vs Combined volatility')
    .setCursor((cursor) => {
        cursor.setTickMarkerYVisible(false)
        .setGridStrokeYStyle(emptyLine)
    })

    const aroonUp = heatmapChart.addPointLineAreaSeries({ schema: { x: { pattern: 'progressive' }, y: { pattern: null } } })
    .setName('AroonUp')
    .setAreaFillStyle(emptyFill)
    .setPointFillStyle(emptyFill)
    .setStrokeStyle(new SolidLine({
        thickness: 2, 
        fillStyle: new SolidFill({
            color: ColorRGBA( 255, 180, 0 )
        })
    }))
    const aroonDown = heatmapChart.addPointLineAreaSeries({ schema: { x: { pattern: 'progressive' }, y: { pattern: null } } })
    .setName('AroonDown')
    .setAreaFillStyle(emptyFill)
    .setPointFillStyle(emptyFill)
    .setStrokeStyle(new SolidLine({
        thickness: 2, 
        fillStyle: new SolidFill({
            color: ColorRGBA( 100, 100, 255 )
        })
    }))
    let heatmap = heatmapChart.addHeatmapGridSeries({
        columns : 2,
        rows: 2
    })

    // Creating the trading chart.
    const taChart = trader.tradingChart({ parentElement: containerTAChart, loadFromStorage: false })
    const taMethods = new TechnicalAnalysisMethods(taChart)

    // Add a default dataset.
    await fetch(`${document.head.baseURI}examples/assets/1101/USDEUR.csv`).then((res) => res.text()).then((text) => {
        taChart.loadCsvString(text, 'USDEUR')
        updateHeatmap()
    })

    mapChart.regions.addEventListener('click', (_, region) => {
        let dataName = ''
        const euroList = ['AUT', 'BEL', 'CYP', 'DEU', 'ESP', 'EST', 'FIN', 'FRA', 'GRC', 'HRV', 'IRL', 'ITA', 'LTU', 'LUX', 'LVA', 'MLT', 'NLD', 'PRT', 'SVK', 'SVN']

        switch (region.ISO_A3) {
            case 'ARG':
                dataName = 'USDARS'
                break
            case 'AUS':
                dataName = 'USDAUD'
                break
            case 'BRA':
                dataName = 'USDBRL'
                break
            case 'CAN':
                dataName = 'USDCAD'
                break
            case 'CHE':
                dataName = 'USDCHF'
                break
            case 'CHN':
                dataName = 'USDCNY'
                break
            case 'DNK':
                dataName = 'USDDKK'
                break
            case 'GBR':
                dataName = 'USDGBP'
                break
            case 'HKG':
                dataName = 'USDHKD'
                break
            case 'IND':
                dataName = 'USDINR'
                break
            case 'ISR':
                dataName = 'USDILS'
                break
            case 'JPN':
                dataName = 'USDJPY'
                break
            case 'KOR':
                dataName = 'USDKRW'
                break
            case 'MEX':
                dataName = 'USDMXN'
                break
            case 'NOR':
                dataName = 'USDNOK'
                break
            case 'NZL':
                dataName = 'USDNZD'
                break
            case 'RUS':
                dataName = 'USDRUB'
                break
            case 'SAU':
                dataName = 'USDSAR'
                break
            case 'SGP':
                dataName = 'USDSGD'
                break
            case 'SWE':
                dataName = 'USDSEK'
                break
            case 'TUR':
                dataName = 'USDTRY'
                break
            case 'TWN':
                dataName = 'USDTWD'
                break
            case 'ZAF':
                dataName = 'USDZAR'
                break
            default:
                break
        }

        if (euroList.includes(region.ISO_A3)) {
            dataName = 'USDEUR'
        }

        if (dataName != '') {
            fetch(`${document.head.baseURI}examples/assets/1101/` + dataName + `.csv`).then((res) => res.text()).then((text) => {
                taChart.loadCsvString(text, dataName)
                updateHeatmap()
            })
        }
    })

    // Updates the heatmap based on currently shown dataset.
    function updateHeatmap() {
        const dataset = taChart.getData(false)

        const aroonValues = taMethods.calculateAroon(dataset[2], dataset[3], 14)

        // Combining three volatility indicators to create the heatmap.
        const atrValues = taMethods.calculateAverageTrueRange(dataset[4], dataset[2], dataset[3], 14)
        const cvValues = taMethods.calculateChaikinVolatility(dataset[2], dataset[3], 7, 7, MovingAverageType.ExponentialMovingAverage)
        const zValues = taMethods.calculateZValue(dataset[4], 14, MovingAverageType.None)

        aroonUp.clear()
        aroonDown.clear()
        const xValues = []
        for (let i = 0; i < aroonValues[0].length; i++) {
            xValues[i] = i
        }
        aroonUp.appendSamples({ x: xValues, y: aroonValues[0] })
        aroonDown.appendSamples({ x: xValues, y: aroonValues[1] })

        const heatmapData = []
        let low = 1000
        let high = -1000
        for (let i = 0; i < aroonValues[0].length; i++) {
            const volatility = atrValues[i] * cvValues[i] * zValues[i]
            heatmapData.push([
                volatility,
                volatility
            ])
            low = volatility < low ? volatility : low
            high = volatility > high ? volatility : high
        }

        heatmap.dispose()
        heatmap = heatmapChart.addHeatmapGridSeries({
            columns: aroonValues[0].length,
            rows: 2,
        })
        .setName('Volatility')
        .setStart({ x: 0, y: 0 })
        .setEnd({ x: aroonValues[0].length - 1, y: 100 })
        .setFillStyle(
            new PalettedFill({
                lookUpProperty: 'value',
                lut: new LUT({
                    interpolate: true,
                    steps: [
                        { value: low, color: ColorRGBA(0, 255, 0, 80) },
                        { value: (low + high) * 0.25, color: ColorRGBA(0, 0, 0, 0) },
                        { value: high, color: ColorRGBA(255, 0, 0, 80) }
                    ]
                }),
            }),
        )
        .setCursorFormattingOverride((hit, before) => {
            return [before[0], ['Value:', '', hit.intensity.toFixed(1)]]
        })
        .invalidateIntensityValues(heatmapData)

        aroonUp.setCursorFormattingOverride((hit, before) => {
            return [before[0], before[2]]
        })
        aroonDown.setCursorFormattingOverride((hit, before) => {
            return [before[0], before[2]]
        })

        heatmapChart.getDefaultAxisY().setInterval({ start: -1, end: 101 })
    }
})