/* ==========================================================================
   Timeline handler
   - Provide the timeline with new updates if needed.
 ========================================================================== */

export const TimelineHandler = {

    timeline: null,
    lastUpdateYear: null,
    updatesRoute: null,
    readMoreLabel: null,

    init: function () {

        TimelineHandler.timeline = document.querySelector('.js-timeline');

        // Only continue the init if the timeline object is found
        if (isset(TimelineHandler.timeline)) {

            // Get the required attribute for adding more updates
            TimelineHandler.lastUpdateYear = TimelineHandler.timeline.getAttribute('data-last-update-year');
            TimelineHandler.updatesRoute = TimelineHandler.timeline.getAttribute('data-updates-route');
            TimelineHandler.readMoreLabel = TimelineHandler.timeline.getAttribute('data-read-more-label');

            // Add click event to button to load more updates
            const moreUpdatesButton = TimelineHandler.timeline.querySelector('.js-get-more-updates');
            moreUpdatesButton.addEventListener('click', TimelineHandler.getMoreUpdates);
        }
    },

    /**
     * Get updates from timeline
     * we pass the amount of already found items as segment, so we know how many we can skip
     */
    getMoreUpdates: function () {

        const languageString = '?lang=' + document.documentElement.lang;

        const currentUpdates = TimelineHandler.timeline.querySelectorAll('.js-timeline-item');
        const currentAmountOfUpdates = currentUpdates.length;

        Ajax.get('/api/updates/timeline/' + currentAmountOfUpdates + languageString, TimelineHandler.addUpdateToTimeline);

    },

    /**
     * Append loaded update to timeline
     *
     * @param data
     */
    addUpdateToTimeline: function (data) {

        if(data.status !== 200) {
            console.log('TimelineHandler: Unexpected response ' + data.status);
            return;
        }

        const json = JSON.parse(data.response);

        // Get the timeline content and extract the current html
        const timelineContent = TimelineHandler.timeline.querySelector('.js-timeline-items');
        let timelineContentHtml = timelineContent.innerHTML;

        json.updates.forEach(function (item) {

            // Check if we need to add a year timeline item
            if (item.date.year < TimelineHandler.lastUpdateYear) {

                timelineContentHtml = TimelineHandler._appendTimelineYearItem(timelineContentHtml, item.date.year);

                // Update Timeline Last update year
                TimelineHandler.lastUpdateYear = item.date.year;
            }

            timelineContentHtml = TimelineHandler._appendTimelineItem(timelineContentHtml, item);

            // Insert the appended timelineContentHtml
            timelineContent.innerHTML = timelineContentHtml;

        });

        if(!json.updatesLeft){
            TimelineHandler.timeline.querySelector('.js-get-more-updates-container').remove();
            TimelineHandler.timeline.querySelector('.js-no-more-updates-available').classList.remove('is-hidden');
        }

    },

    /**
     * Append year timeline item HTML
     *
     * @param html
     * @param year
     * @returns {*}
     * @private
     */
    _appendTimelineYearItem(html, year) {
        html += ' <div class="c-timeline__item  c-timeline__item--divider">' +
            '<div class="c-timeline__year">' + year + '</div>' +
            '</div>';

        return html;
    },

    /**
     * Append timeline item HTML
     *
     * @param html
     * @param item
     * @returns {*}
     * @private
     */
    _appendTimelineItem(html, item) {

        html +=
            '<div class="c-timeline__item  js-timeline-item">' +
            '       <div class="c-timeline__container">' +
            '           <div class="c-timeline__header">' +
            '               <time class="c-timeline__date"' +
            '                     datetime="' + item.date.year + '-' + item.date.month + '-' + item.date.day + '2019-01-01">' + item.date.day + ' ' + item.date.monthName + '</time>' +
            '               <h3 class="c-timeline__title">' + item.name + '</h3>' +
            '           </div>' +
            '        <div class="c-timeline__body">';

        // Add image if not null
        if (isset(item.image)) html += '<a href="/' + TimelineHandler.updatesRoute + '/' + item.slug + '"><img class="c-timeline__image" src="' + item.image + '"/></a>';

        html +=
            '    <div class="c-timeline__content  s-text  checklist-has-x-small-font">' + item.description + '</div>' +
            '       <div class="c-timeline__action">' +
            '          <a class="c-button c-button--ghost c-button--icon" href="/' + TimelineHandler.updatesRoute + '/' + item.slug + '">' +
            '              <span class="c-button__text">' + TimelineHandler.readMoreLabel + '</span>' +
            '              <i class="c-button__icon">' +
            '                 <svg id="arrow" width="16px" height="12px" viewBox="0 0 16 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">' +
            '                    <path fill="currentColor" d="M13.3998179,6.7826087 L0.761575693,6.7826087 C0.340969052,6.7826087 1.12798659e-13,6.43222285 1.12798659e-13,6 C1.12798659e-13,5.56777715 0.340969052,5.2173913 0.761575693,5.2173913 L13.3998179,5.2173913 L9.62273769,1.33599661 C9.32532388,1.0303689 9.32532388,0.534848487 9.62273769,0.22922078 C9.9201515,-0.0764069266 10.4023546,-0.0764069266 10.6997684,0.22922078 L15.7769396,5.44661208 C16.0743535,5.75223979 16.0743535,6.24776021 15.7769396,6.55338792 L10.6997684,11.7707792 C10.4023546,12.0764069 9.9201515,12.0764069 9.62273769,11.7707792 C9.32532388,11.4651515 9.32532388,10.9696311 9.62273769,10.6640034 L13.3998179,6.7826087 Z"></path>' +
            '                 </svg>' +
            '              </i>' +
            '          </a>' +
            '        </div>' +
            '    </div>' +
            '</div>';

        return html;
    }

};