var d3 = require('d3')
import {readxml} from './data.js'
import {render_calendar, render_nights, render_astronomy, render_temperature, render_clouds} from './render.js'
import './style.sass'

const canvas = d3.select('svg')

//const url = 'https://forecast.weather.gov/MapClick.php?lat=39.9243509&lon=-75.1696126&FcstType=digitalDWML'
const url = '/forcast.xml'

const render = function (data) {
    data.beginTime = new Date(
        data.startTimes[0].getFullYear(),
        data.startTimes[0].getMonth(),
        data.startTimes[0].getDate(),
        0,0,0
    )
    data.endTime = new Date(
        data.endTimes[data.endTimes.length - 1].getFullYear(),
        data.endTimes[data.endTimes.length - 1].getMonth(),
        data.endTimes[data.endTimes.length - 1].getDate(),
        23,59,59
    )

    const width = canvas.node().getBoundingClientRect().width
    const height = canvas.node().getBoundingClientRect().height

    const calHeight = 20
    const astroHeight = 50
    const tempHeight = 300
    const cloudHeight = height - (calHeight +tempHeight + astroHeight)

    render_calendar(canvas, width, calHeight, 0, data)
    render_nights(canvas, width, height - calHeight, calHeight, data)
    render_astronomy(canvas, width, astroHeight, calHeight, data)
    render_temperature(canvas, width, tempHeight, calHeight + astroHeight, data)
    render_clouds(canvas, width, cloudHeight, calHeight + astroHeight + tempHeight, data)
}

d3.xml(url).then(function(xmldoc) {
    let data = readxml(xmldoc)
    render(data)
})