// ==UserScript==
// @name        GitHub Pulse Sort By
// @namespace   faleij
// @description adds sorting option to repo pulse
// @include     https://github.com/*/*/pulse
// @version     1
// @grant       none
// @downloadURL none
// ==/UserScript==
/* jshint esnext:true, node:true, browser:true */
/* globals $  */
'use strict';

function create() {
    // Load assignees
    $('li>.title').each((index, title) => $.get($(title).attr('href')).then(data => $(title).parent().append($('.assignee', $(data)).parent().css('float', 'right'))));

    let menu = $(`
<div class="select-menu js-menu-container js-select-menu faleijs-sort-by-menu">
        <button class="btn btn-sm select-menu-button js-menu-target" type="button" aria-haspopup="true">
          <i>Sort By</i>
        </button>

        <div class="select-menu-modal-holder js-menu-content js-navigation-container" aria-hidden="true">
            <div class="select-menu-modal">
                <div class="select-menu-header">
                    <span class="select-menu-title">Sort by</span>
                    <span class="octicon octicon-remove-close js-menu-close"></span>
                </div>

                <div class="select-menu-list">
                    <div class="select-menu-item js-navigation-item selected">
                        <input checked="checked" id="sort_changed" name="sortBy" value="time" type="radio">
                        <span class="select-menu-item-icon octicon octicon-check"></span>
                        <div class="select-menu-item-text">
                            Last Changed
                        </div>
                    </div>

                    <div class="select-menu-item js-navigation-item">
                        <input id="sort_assignee" name="sortBy" value="assignee" type="radio">
                        <span class="select-menu-item-icon octicon octicon-check"></span>
                        <div class="select-menu-item-text">
                            Assignee
                        </div>
                    </div>

                    <div class="select-menu-item js-navigation-item">
                        <input id="sort_created" name="sortBy" value="num" type="radio">
                        <span class="select-menu-item-icon octicon octicon-check"></span>
                        <div class="select-menu-item-text">
                            Created
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</li>
    `).prependTo('.header-with-actions');

    $('input:radio[name="sortBy"]', menu).change(function () {
        let sort = (a,b) => $(`.${this.value}:first`, a).text() > $(`.${this.value}:first`, b).text();

        if (this.value === 'num') {
            sort = (a,b) => parseInt($(`.${this.value}:first`, a).text().substr(1)) > parseInt($(`.${this.value}:first`, b).text().substr(1));
        }

        if (this.value === 'time') {
            sort = (a,b) => new Date($(`.${this.value}:first`, a).attr('datetime')) > new Date($(`.${this.value}:first`, b).attr('datetime'));
        }

        return $('.repository-content ul').each((index, ul) => $('li', ul).sort(sort).appendTo(ul));
    });
}

const target = document.querySelector('#js-repo-pjax-container');

const mutationHandler = () => $('.faleijs-sort-by-menu', target).length || create();

const observer = new MutationObserver(mutationHandler);

observer.observe(target, { childList: true, subtree: true });

mutationHandler();