#!/usr/bin/env node

import express from 'express';
import {create} from 'express-handlebars';
import fs from 'fs-extra';

const app = express();

const hbs = create({
    extname: '.hbs', defaultLayout: false,
    partialsDir: ['.'],
})

app.engine('.hbs', hbs.engine);
app.set('view engine', '.hbs');
app.set('views', './layouts');

app.get('/', async (req, res) => {
    const jsonFileName = (req.query.data) ? req.query.data : 'default';
    const data = await fs.readJson(`./data/${jsonFileName}.json`);

    res.render('page-container', data);
});

app.use(express.static('src'));

const PORT = 3002;
app.listen(PORT, () => {
    console.log(`The web server has started on port ${PORT}`);
});

// TODO:
// Add Gulp for CSS/JS Styling
// Add Browsersync that will refresh the page on changes
// Top Panel with options to switch data (select input)
// Options to resize the page and test Responsiveness (select input)