const tabListener = require('binary-style').tabListener;
const localize    = require('../../_common/localize').localize;
const urlParam    = require('../../_common/url').param;
const TNCApproval = require('../../app/pages/user/tnc_approval');

const TermsAndConditions = (() => {
    let sidebar_width;

    const onLoad = () => {
        const container = document.getElementsByClassName('sidebar-collapsible-container')[0];
        if (container) sidebar_width = container.offsetWidth;

        handleActiveTab(); // adds active class
        TNCApproval.requiresTNCApproval(
            $('#btn_accept'),
            () => { $('.tnc_accept').setVisibility(1); },
            () => { $('#tnc_accept').html(localize('Your settings have been updated successfully.')); });
        tabListener();

        $('.sidebar-collapsible').on('click', sidebarClickHandler);
        updateSidebarDOM();

        checkWidth();
        window.onresize = checkWidth;

        $('.currentYear').text(new Date().getFullYear());
    };

    const handleActiveTab = () => {
        const params      = window.location.hash.split('&');
        const hash        = params[0] || '#legal';
        const sub_content = params[1];
        const menu        = '.tab-menu-wrap';
        const content     = '.tab-content-wrapper';

        const parent_active = 'active';
        const child_active  = 'a-active';

        $(menu)
            .find('li')
            .removeClass(parent_active)
            .find('span')
            .removeClass(child_active);

        let $tab_to_show = $(hash);
        // if hash is a subtab or has subtabs
        if ($tab_to_show.find('.tm-li-2').length > 0 || /tm-li-2/.test($(hash).attr('class'))) {
            $tab_to_show =
                $tab_to_show
                    .find('.tm-a-2')
                    .first()
                    .addClass(child_active)
                    .closest('.tm-li');
        }
        $tab_to_show.addClass(parent_active);

        let content_to_show = `div${hash}-content`;
        if ($(content_to_show).length === 0) {
            content_to_show = `div#${$(hash).find('.tm-li-2').first().attr('id')}-content`;
        }
        $(content)
            .find('> div')
            .setVisibility(0)
            .end()
            .find(content_to_show)
            .setVisibility(1);
    };

    const updateSidebarDOM = () => {
        const id = window.location.hash || '#legal-binary';
        const $li = $(`${id}-link`);
        const $parent_li = $li.closest('.has-submenu');

        if ($parent_li.length) {
            $parent_li.addClass('active').children('a').addClass('selected no-transition');
        }

        $li.addClass('active').find('a').addClass('selected');

        $(`${id}-content`).removeClass('invisible');
    };

    const sidebarClickHandler = (e) => {
        const $target = $(e.target);
        if (!$target.is('a')) return;
        const $submenu = $target.siblings('ul');

        if ($submenu.length) {
            // parent link is clicked
            e.preventDefault();

            if ($submenu.find('.selected').length) {
                // has selected sublink
                $target.removeClass('no-transition').parent('li').toggleClass('active');
            }
            else {
                window.location.hash = $submenu.find('a')[0].hash;
            }
        }
    };

    const checkWidth = () => {
        const mq = window.matchMedia('(max-width: 1023px)').matches;
        if (mq) {
            $('.sidebar-collapsible').css({ position: 'relative' });
            $(window).off('scroll', stickySidebar);
        } else {
            $(window).on('scroll', stickySidebar);
        }
        return mq;
    };

    const stickySidebar = () => {
        const $sidebar   = $('.sidebar-collapsible');
        const $content   = $('.sidebar-collapsible-content');
        const $container = $('.sidebar-collapsible-container');

        if (!$sidebar.is(':visible')) return;

        if (window.scrollY < $content.offset().top) {
            $sidebar.css({ position: 'relative' });
        } else if (window.scrollY + $sidebar[0].offsetHeight + 20 >=
            $container[0].offsetHeight + $container.offset().top) { // 20 is the padding for content from bottom, to avoid menu snapping back up
            $sidebar.css({ position: 'absolute', bottom: '20px', top: '', width: sidebar_width });
        } else {
            $sidebar.css({ position: 'fixed', top: '0px', bottom: '', width: sidebar_width });
        }
    };

    const onUnload = () => {
        $('.sidebar-collapsible').off('click');
    };

    return {
        onLoad,
        onUnload,
    };
})();

module.exports = TermsAndConditions;

@@ -801,92 +801,19 @@
     
-$('.sidebar-collapsible').on('click', sidebarClickHandler);%0A        update
+init
 Sidebar
-DOM
 ();%0A
@@ -2282,24 +2282,19 @@
 nst 
-update
+init
 Sidebar
-DOM
  = (
@@ -2312,42 +2312,117 @@
     
-const id = window.location
+if (!window.location.hash) %7B%0A            const new_url = new URL(window.location);%0A            new_url
 .hash 
-%7C%7C
+=
  '#l
@@ -2435,16 +2435,271 @@
 inary';%0A
+            window.history.replaceState(%7B%7D, '', new_url.href);%0A        %7D%0A        $('.sidebar-collapsible').on('click', sidebarClickHandler);%0A        updateSidebarDOM();%0A    %7D;%0A%0A    const updateSidebarDOM = () =%3E %7B%0A        const id = window.location.hash;%0A
         

add hash when not present