const cheerio = require('cheerio');
const _ = require('lodash');

module.exports = {
    /**
     * 分离 CSS
     * @param {*} $
     * @param {*} option
     */
    processStyle($, option) {
        let css = [];

        $('*').each(function(index) {
            let $this = $(this);
            let localStyle = $this.attr('style');
            let className = `yoho-inline-style-${option.prefix}-${index}`;

            if (localStyle) {
                css.push(`.${className}{${localStyle}}`);
                $this.removeAttr('style');
                $this.addClass(className);
            }
        });
        return css.join('');
    },

    /**
     * 替换标签
     * @param {*} $
     */
    processTag($, option) {
        let css = [];

        // mip-anim
        $('img[src*=".gif"]').each(function() {
            let $this = $(this);
            let mipAnim = `<mip-anim layout="container" src="${$this.attr('src')}" alt="${$this.attr('alt') || ''}" class="${$this.attr('class') || ''}"></mip-anim>`; // eslint-disable-line

            $this.replaceWith(mipAnim);
        });

        // mip-img
        $('img').each(function() {
            let $this = $(this);
            let mipImg = `<mip-img layout="container" src="${$this.attr('src')}" alt="${$this.attr('alt') || ''}" class="${$this.attr('class') || ''}"></mip-img>`; // eslint-disable-line

            $this.replaceWith(mipImg);
        });

        // mip-video
        $('video').each(function() {
            let $this = $(this);
            let mipVideo = `<mip-video layout="container" poster="${$this.attr('poster') || ''}" src="${$this.attr('src')}" alt="${$this.attr('alt') || ''}" class="${$this.attr('class') || ''}"></mip-video>`; // eslint-disable-line

            $this.replaceWith(mipVideo);
        });

        // mip-audio
        $('audio').each(function() {
            let $this = $(this);
            let mipAudio = `<mip-audio src="${$this.attr('src')}"></mip-audio>`; // eslint-disable-line

            $this.replaceWith(mipAudio);
        });

        // mip-iframe
        $('iframe').each(function() {
            let $this = $(this);
            let mipIframe = `<mip-iframe layout="container" src="${$this.attr('src')}" class="${$this.attr('class') || ''}"></mip-iframe>`; // eslint-disable-line

            $this.replaceWith(mipIframe);
        });

        // mip-input
        $('input').each(function() {
            let $this = $(this);
            let mipInput = `<input id="${$this.attr('id')}" type="hidden" value="${$this.val()}">`;

            $this.replaceWith(`<mip-form url="https://m.yohobuy.com/">${mipInput}</mip-form>`);
        });

        // mip-link
        if (option.mipLink) {
            $('a').each(function() {
                let $this = $(this);
                let mipLink = `<a data-type="mip" class="${$this.attr('class') || ''}" 
                    href="${$this.attr('href')}">${$this.html()}</a>`;

                $this.replaceWith(mipLink);
            });
        }

        // style
        $('style').each(function() {
            let $this = $(this);

            css.push($this.html());
            $this.remove();
        });

        return {
            mipHtml: $.html(),
            css: css.join('')
        };
    },

    /**
     * 处理 HTML 为 MIP 所需要的格式
     * @param {*} html HTML
     * @param {*} option.prefix  CSS 前缀
     */

    process(html = '', option = {prefix: 0}) {
        html = _.isString(html) ? html : '';

        let $ = cheerio.load(html, {
            decodeEntities: false
        });
        let inlineStyle = this.processStyle($, option); // 必须先处理内联样式
        let tagHtml = this.processTag($, option);

        return {
            mipHtml: tagHtml.mipHtml,
            css: tagHtml.css + inlineStyle
        };
    }
};