import Litedom from '/js/litedom.es.js';
import db from '/js/db.js';

Litedom({
    el: '#app',
    data: {
        settings: {
            goal: 1500,
        },
        history: [],
        selected: {},
        today: (new Date()).toLocaleDateString('en-US').replaceAll('/', '-'),
        used: (state) => {
            return state.history.reduce((prev, curr) => {
                return prev + curr.value;
            }, 0);
        },
        left: (state) => {
            return (state.settings.goal - state.used);
        },
        date: () => {
            return (new Date()).toLocaleDateString(undefined, {
                weekday: 'long',
                month: 'long',
                day: 'numeric'
            });
        }
    },
    async init() {
        // load todays history
        this.entries();

        // set focus
        document.getElementById('calories').focus();

        // start service worker
        // this.worker();
    },
    async entries() {
        this.data.history = await db.entries.where({ day: this.data.today }).toArray();
    },
    details(e) {
        // get selected index
        let idx = e.target.getAttribute('idx');

        // set seleted history index
        this.data.selected = {idx: idx, ...this.data.history[idx]};

        console.log('selected', idx, this.data.selected);
    },
    remove(e) {
        // get selected index
        let idx = e.target.getAttribute('idx');

        // delete entry
        db.entries.delete(this.data.history[idx].id).then(() => {
            // update entries list
            this.entries();
        });
    },
    modify(e) {
        // get selected index
        let idx = e.target.getAttribute('idx');

        // TODO: capture modal form data
    },
    save() {
        // capture quick form entry
        let calories = document.getElementById('calories');
        let name = document.getElementById('name');

        // source of calories
        let source = (calories) => {
            let value = Number(calories.value);

            if(value) {
                return (value > 0) ? 'Food' : 'Exercise';
            } else {
                return 'Drink'
            }
        }

        // add new entry
        db.entries.add({
            name: String(name.value),
            target: 'calorie',
            type: source(calories),
            value: Number(calories.value),
            day: this.data.today,
            created: Date.now(),
            modified: Date.now(),
        }).then(async () => {
            // update todays history
            this.entries();
        }).catch((err) => {
            console.error(err);
        });

        // reset form
        document.getElementById('entry').reset();

        // set focus
        document.getElementById('calories').focus();
    },
    worker() {

    },
    created() {
        // start service worker
        if ('serviceWorker' in navigator) {
            window.addEventListener('load', function () {
                navigator.serviceWorker.register('/sw.js')
                    .then((reg) => console.log(reg.scope))
                    .catch((err) => console.error(err));
            });
        }

        this.init();
    },
    updated() {
        // [M]aterial date picker
        let pickers = document.querySelector('.datepicker');
        M.Datepicker.init(pickers, {});

        // [M]aterial modal
        let modal = document.querySelector('#detailsModal');
        M.Modal.init(modal, {});
    },
    removed() {}
});