'use-strict';

/* TODO : Send the result of guide :
  const guide = require('remark-preset-lint-markdown-style-guide');
*/

const html = require('remark-rehype');
const kbd = require('remark-kbd');
const math = require('remark-math');
const highlight = require('remark-highlight.js');
const multiChoice = require('remark-multiple-choice');
const lineInput = require('remark-line-input');
const select = require('remark-select');
const textInput = require('remark-text-input');
const raw = require('rehype-raw');
const rehypeKatex = require('rehype-katex');
const rehypeStringify = require('rehype-stringify');
const unified = require('unified');
const remark = require('remark-parse');
const customBlocks = require('remark-custom-blocks');
const iframes = require('remark-iframes');

function toHTML(data, fnc) {
  unified()
    .use(remark)
    .use(lineInput)
    .use(textInput)
    .use(select)
    .use(multiChoice)
    .use(math)
    .use(kbd)
    .use(customBlocks, {
      information: {
        classes: 'special-box information',
        title: 'optional',
      },
      comment: {
        classes: 'special-box comment',
        title: 'optional',
      },
      attention: {
        classes: 'special-box attention',
        title: 'optional',
      },
      question: {
        classes: 'special-box question',
        title: 'optional',
      },
      good: {
        classes: 'special-box good',
      },
      secret: {
        classes: 'special-box secret',
        title: 'optional',
      },
      bad: {
        classes: 'special-box bad',
      }})
    .use(highlight)
    .use(iframes, {
      // This key corresponds to the hostname: !(http://hostname/foo)
      // the config associated to this hostname will apply to any iframe
      // with a matching hostname
      'www.youtube.com': {
        tag: 'IFRAME',
        width: 560,
        height: 315,
        disabled: false,
        replace: [
          ['watch?v=', 'embed/'],
          ['http://', 'https://'],
        ],
        thumbnail: {
          format: 'http://img.youtube.com/vi/{id}/0.jpg',
          id: '.+/(.+)$'
        },
        removeAfter: '&'
      }
    })
    .use(html, {allowDangerousHTML: true})
    .use(rehypeKatex)
    .use(raw)
    .use(rehypeStringify)

    .process(data, fnc);
}

toHTML.defaultValue = `Plugins presentation
=================

This page is an example of using [remark][remark] with plugins that I created. These plugins are used to parse [lines][remark-line-input] of [text](remark-text-input), [selection boxes][remark-select] and even [MCQs][remark-mcq].

The goal of this project is to propose a set of plugins allowing to create **exercises** easily.

To first let's see somes examples !

Example of exercises
--------------------

The 151th pokémon [__151th pokémon__]{#pokemon oninput="pokemon(this)"} is one of the two pokemons that can use transform attack (the other one is [ Pikachu | Ditto | Mewtow | Eevee |v] ).


Line edit
---------

You can use line edit like that :

Login : [__email or username__]{#login}  
Passwd: [__Passwd__]{#password type=password}

Text edit
--------

It's also easy to use text edit :

[______

This is a text zone

______]{rows=13 cols=30}


Selection box
-------------

To use a selection box, just write it in the markdown file.

[ Mario | Peach | Luigi |v]

[remark]: https://github.com/remarkjs/remark "Github of the remark project"
[remark-line-input]: https://www.npmjs.com/package/remark-line-input
[remark-text-input]: https://www.npmjs.com/package/remark-text-input
[remark-select]: https://www.npmjs.com/package/remark-select


<script>
  if( !pokemon ) {
function pokemon( elem ) {
    if( elem.value != 'mew' ) {
        if( elem.classList.contains('valid') )
            elem.classList.remove('valid')
        elem['className'] = 'invalid';
    }else{
        if( elem.classList.contains('invalid') )
            elem.classList.remove('invalid')
        elem.classList.add('valid')
    }
}}</script>`;

module.exports = toHTML;