Source: js/weekly_navigation.js

import { getCustomTagColor, getDaysData } from './storage.js';
import { getDaysKey, getWeek, getName } from './date.js';
import {
    getEventWidths,
    minutesSinceMidnight,
} from './components/sortEvents.js';

/* date variables */
window.curDate = new Date();

/* access log components */
// const noteArea = document.getElementById('notes-text-area');
// const mediaArea = document.getElementById('media-text-area');
const forward = document.getElementById('right-arrow');
const backward = document.getElementById('left-arrow');
// const sunday = document.getElementById('cal-sun');
// const monday = document.getElementById('cal-mon');
// const tueday = document.getElementById('cal-tues');
// const wednesday = document.getElementById('cal-wed');
// const thursday = document.getElementById('cal-thurs');
// const friday = document.getElementById('cal-fri');
// const saturday = document.getElementById('cal-sat');
const sideBar = document.querySelector('#mySideBar ul');

/** TODO:
 * Removes the current content from the weekly log
 */

function removeAll(taskBox, eventBox) {
    // sideBar remover
    const sideBarLen = sideBar.childNodes.length;
    for (let i = 0; i < sideBarLen; i += 1) {
        sideBar.removeChild(sideBar.lastChild);
    }
    // task remover
    const taskBoxLen = taskBox.childNodes.length;
    for (let i = 0; i < taskBoxLen; i += 1) {
        taskBox.removeChild(taskBox.lastChild);
    }
    // event remover /* const eventBox = document.getElementById('cal-sun'); */
    const eventBoxLen = eventBox.querySelectorAll('label').length;
    for (let i = 0; i < eventBoxLen; i += 1) {
        eventBox.querySelector('label').remove();
    }
}

// this function is here just as a reference
// so i can use it in populate()
// the function content is at the bottom of the file
let sideBarClick = function sideBarClickedTemp() {};

function goToDailyLog(key) {
    window.location.href = `daily_log.html?day=${key}`;
}

function setTasks(allTasks, taskBox) {
    allTasks.forEach((task) => {
        const newTask = document.createElement('div');
        newTask.classList.add('weekly-task-container');
        newTask.innerText = ['—', task.content].join(' ');
        taskBox.append(newTask);
    });
}

/**
 * Changes the date title, removes existing content, populates page with current date's content
 * @param {string} keyT - The date of the journal
 */

function populateW(keyT) {
    // set curDate to the sunday before keyT
    const dateObj = new Date(`${keyT}T00:00:00`);
    dateObj.setDate(dateObj.getDate() - dateObj.getDay());
    window.curDate.setDate(dateObj.getDate());
    const key = getDaysKey(window.curDate);

    const name = getName(key);

    const title = [
        'Week of ',
        name.split(',')[1],
        ', ',
        window.curDate.getFullYear(),
    ].join('');

    document.getElementsByTagName('h3')[0].innerText = title;

    // Sets all dates for each day
    const days = document.getElementsByClassName('date');
    for (let i = 0; i < 7; i += 1) {
        // loop through every log
        const tempKey = getDaysKey(window.curDate);
        const log = getDaysData(tempKey);
        const allTasks = log.tasks;

        const day = log.name;

        // get only the events with a from and to time in allEve
        const tempEve = [];
        for (let j = 0; j < log.events.length; j += 1)
            if (log.events[j].from !== '' && log.events[j].to !== '')
                tempEve.push(log.events[j]);
        const allEve = tempEve;

        // get the widths and left percentage
        const eveWidths = getEventWidths(allEve);

        window.curDate.setDate(window.curDate.getDate() + 1);

        // set onclick for div outside
        const divOutside = document.getElementById(
            `cal-${days[i].getAttribute('id')}`
        );
        divOutside.setAttribute('data-key', tempKey);

        divOutside.onclick = function onClickText() {
            goToDailyLog(this.getAttribute('data-key'));
        };

        // set name for thing
        // eslint-disable-next-line prefer-destructuring
        days[i].innerText = getName(tempKey).split(',')[1];

        const taskDay = log.name.slice(0, 3).toLowerCase();
        const taskID = ['cal', 'task', taskDay].join('-');
        const taskBox = document.getElementById(taskID);
        const id = `cal-${day.slice(0, 3).toLowerCase()}`;
        const eventBox = document.getElementById(id);

        // clear any existing entries (add var for event container as parameter)
        removeAll(taskBox, eventBox);
        // setting all tasks
        setTasks(allTasks, taskBox);

        for (let j = 0; j < allEve.length; j += 1) {
            const eventLabel = document.createElement('label');

            // Get start and end times (hours and minutes) of event
            const startTime = allEve[j].from;
            const endTime = allEve[j].to;

            // const startTimeHr = startTime.slice(0, startTime.indexOf(':'));
            // const startTimeMinutes = startTime.substr(
            //     startTime.indexOf(':') + 1,
            //     3
            // );

            // const endTimeHr = endTime.slice(0, endTime.indexOf(':'));
            // const endTimeMinutes = endTime.substr(endTime.indexOf(':') + 1, 3);

            // const startTimeAMPM = startTime.slice(-2);
            // const endTimeAMPM = endTime.slice(-2);

            // Constant attributes
            eventLabel.style.position = 'absolute';
            eventLabel.style.display = 'flex';
            eventLabel.style.flexDirection = 'row';
            eventLabel.style.justifyContent = 'center';
            eventLabel.style.alignItems = 'center';
            eventLabel.textContent = allEve[j].content;
            eventLabel.style.wordBreak = 'break-word';

            // set the widths and left percentages
            eventLabel.style.left = `${eveWidths[j].left}%`;
            eventLabel.style.width = `${eveWidths[j].width}%`;

            // apply tag styling
            let tagsClass = 'no-tag';
            if (allEve[j].tags.length > 0) {
                tagsClass = `${getCustomTagColor(allEve[j].tags[0])}-tag`;
            }
            eventLabel.setAttribute('class', tagsClass);

            // calculate top and bottom percentages
            eventLabel.style.top = `${minutesSinceMidnight(startTime) / 6}%`;
            eventLabel.style.bottom = `${
                (10 * 60 - minutesSinceMidnight(endTime)) / 6
            }%`;

            eventBox.appendChild(eventLabel);
        }
    }

    // Reset curDate to beginning of week
    window.curDate.setDate(window.curDate.getDate() - 7);

    // update the sidebar
    const allDays = getWeek();
    for (let i = 0; i < 7; i += 1) {
        const newDayLink = document.createElement('a');
        newDayLink.innerText = getName(allDays[i]);
        newDayLink.setAttribute('href', '#');
        newDayLink.setAttribute('data-key', allDays[i]);
        newDayLink.onclick = sideBarClick;
        sideBar.appendChild(newDayLink);
    }
}

// router code put here to prevent dependency cycle

function setStateW(dateKey, newState = true) {
    // get the new url address...
    // first rid of anything after ? or #
    // then append the dateKey after a #
    let url = window.location.href;
    const indQ = url.indexOf('?');
    if (indQ !== -1) url = url.slice(0, indQ);
    const indH = url.indexOf('#');
    if (indH !== -1) url = url.slice(0, indH);
    url = `${url}#${dateKey}`;

    if (newState) window.history.pushState({ key: dateKey }, '', url);
    else window.history.replaceState({ key: dateKey }, '', url);

    window.curDate = new Date(`${dateKey}T00:00:00`);
    populateW(dateKey);
}

function popState(event) {
    if (event.state != null) setStateW(event.state.key, false);
}
window.onpopstate = popState;

/**
 * Increases date by one day, calls populate
 * @listens forward#click
 */
forward.addEventListener('click', (event) => {
    event.preventDefault();

    window.curDate.setDate(window.curDate.getDate() + 7);
    const key = getDaysKey(window.curDate);

    setStateW(key);
});

/**
 * Decreases the date by one day, calls populate
 * @listens backward#click
 */
backward.addEventListener('click', (event) => {
    event.preventDefault();

    window.curDate.setDate(window.curDate.getDate() - 7);
    const key = getDaysKey(window.curDate);

    setStateW(key);
});

/**
 * When the initial document is loaded, call populate on today's journal content
 * @listens document#DOMContentLoaded
 */
document.addEventListener('DOMContentLoaded', () => {
    // the key of the date that we want to load
    let key = '';
    const url = window.location.href;
    const searchStr = '?day=';
    const indexQ = url.indexOf(searchStr);
    const indexH = url.indexOf('#');

    // if the url contians ?day=2021-06-02 (came from weekly log button click)
    if (indexQ !== -1) key = url.slice(indexQ + searchStr.length);
    // if the url contains #2021-06-02 (came from weekly log pressing browser for/back)
    else if (indexH !== -1) key = url.slice(indexH + 1);
    // otherwise go to curDate
    else key = getDaysKey(window.curDate);

    setStateW(key, false);
});

// side bar daily log links
// navigate to daily log
sideBarClick = function sideBarClickActual(event) {
    event.preventDefault();
    goToDailyLog(this.getAttribute('data-key'));
};

const arr = document.querySelectorAll('#mySidebar small a');
for (let i = 0; i < arr.length; i += 1) {
    arr[i].onclick = sideBarClick;
}