require('./bootstrap');
require('./fontawesome');
require('./utils/nav-toggle');
require('./utils/scrolling');

import marked from 'marked'
import {scrollTo, getAll} from './utils';
import validator from './utils/validator';

window.validator = validator;

window.scrollToElement = scrollTo;

window.messageField = function (field, message) {
    let $errorField = field.querySelector('p.help');
    if ($errorField) {
        $errorField.innerText = message;
    } else {
        $errorField = document.createElement('p');
        $errorField.classList.add('help', 'is-danger');
        $errorField.appendChild(document.createTextNode(message));
        field.appendChild($errorField);
    }
};

window.validate = function (element, rule, ...kargs) {
    const root = element.parentElement.parentElement;

    let validated = false;

    if (validator[rule](element.value, ...kargs)) {
        element.classList.remove('is-danger');
        let $errorField = root.querySelector('p.help');
        if ($errorField) {
            root.removeChild($errorField);
        }
        validated = true;
    } else {
        element.classList.add('is-danger');

        window.messageField(root, validator.error(rule));

        validated = false;
    }
    return validated;
};

// register vue components
Vue.component('topic-form', require('./components/outward/TopicFrom'));
Vue.component('post-vote', require('./components/outward/PostVote'));

document.addEventListener('DOMContentLoaded', function () {
    const app_container = document.getElementById('app');

    if (app_container) {
        const app = new Vue({
            el: app_container
        });
    }

    marked.setOptions({
        renderer: new marked.Renderer(),
        gfm: true,
        tables: true,
        breaks: false,
        pedantic: false,
        sanitize: false,
        smartLists: true,
        smartypants: false,
        xhtml: false
    });

    const $markdowns = getAll('section.markdown');
    if ($markdowns.length > 0) {
        for (let $markdown of $markdowns) {
            $markdown.innerHTML = marked($markdown.getAttribute('data-markdown'));
        }
    }

    // comments reply display
    const $comments = getAll('article.comment-item');
    const COMMENT_FORM = document.getElementById('comment-form');
    if ($comments.length > 0) {
        for (let $comment of $comments) {
            const $reply = $comment.querySelector('.reply');
            const $icon = $reply.querySelector('svg');
            $comment.addEventListener('mouseover', () => {
                $icon.style.display = 'inline';
            });
            $comment.addEventListener('mouseout', () => {
                $icon.style.display = 'none';
            });
        }
    }

    // fixed #topic-sidebar
    const sidebar = document.getElementById('topic-sidebar');
    if (sidebar) {
        const rect = sidebar.getBoundingClientRect();
        // 获取要定位元素距离浏览器顶部的距离
        const navH = rect.top;

        window.addEventListener('scroll', function () {
            // 获取滚动条的滑动距离
            const scroH = document.documentElement.scrollTop;
            // 滚动条的滑动距离大于等于定位元素距离浏览器顶部的距离，就固定，反之就不固定
            if (scroH >= navH - 60) {
                sidebar.style.position = 'fixed';
                sidebar.style.top = '60px';
                sidebar.style.width = '22.4%';
                sidebar.style.zIndex = 999;
            } else if (scroH < navH) {
                sidebar.style.position = 'static';
                sidebar.style.top = '';
                sidebar.style.width = '';
                sidebar.style.zIndex = 'auto';
            }
        });
    }
});
