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

Litedom({
    el: '#app',
    data: {
        settings: {
            goal: 1500,
        },
        delay: 0,
        history: [],
        choices: [],
        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();
    },
    async entries() {
        this.data.history = await db.entries.where({ day: this.data.today }).toArray();
    },
    search() {
        clearTimeout(this.data.delay);

        this.data.delay = setTimeout(async () => {
            let calories = document.getElementById('calories');

            if(calories.value === '') {
                this.data.choices = [];
                return;
            }

            // load matches
            this.data.choices = await db.catalog.where({ value: Number(calories.value)}).toArray();

        }, 500);
    },
    details(e) {
        // get selected index
        let idx = e.target.getAttribute('idx');

        // set seleted history index
        this.data.selected = {idx: idx, ...this.data.history[idx]};
    },
    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
    },
    order(e) {
        // get selected index
        let idx = e.target.getAttribute('idx');

        // select choice
        let choice = this.data.choices[idx];

        // add entry based on choice
        db.entries.add({
            name: choice.name,
            description: choice.description,
            target: 'calorie',
            type: choice.type,
            value: choice.value,
            day: this.data.today,
            created: Date.now(),
            modified: Date.now(),
        }).then(() => {
            // refresh entries
            this.entries();

            // clear choices
            this.data.choices = [];

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

            // set focus
            document.getElementById('calories').focus();
        });
    },
    save() {
        // capture quick form entry
        let calories = document.getElementById('calories');

        // 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: '',
            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();
    },
    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() {},
    populate() {

        db.catalog.bulkAdd([
            {
                name: 'Water',
                description: 'Tap, Bottled, Filtered, Spring',
                type: 'DRINK',
                target: 'calorie',
                value: 0,
                brand: '',
                created: Date.now(),
                modified: Date.now(),
            },
            {
                name: 'Dr Zevia',
                description: 'Zero Calorie Soda',
                type: 'DRINK',
                target: 'calorie',
                value: 0,
                brand: 'Zevia',
                created: Date.now(),
                modified: Date.now(),
            },
            {
                name: 'Popcorn',
                description: 'Air Popped Popcorn',
                type: 'FOOD',
                target: 'calorie',
                value: 20,
                brand: '',
                created: Date.now(),
                modified: Date.now(),
            },
        ]).then((r) => {
            console.log('results', r);
        })
    }
});