<!DOCTYPE html>
<html lang="en-us">
  <head>
    <meta charset="UTF-8">
    <base href="https://cdn.jsdelivr.net/gh/fengdh/mdict-js/">
    <title>mdict</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="selectize.default.css" media="screen">
    <style>
      #btnLookup {
        border: none;
        height: 36px;
        font-size: 12pt;
        font-weight: bold;
        vertical-align: top;
        border-radius: 3px;
      }

      #btnLookup:not([disabled]) {
        background: #1A4FDD;
        color: white;
      }

      #dict-title {
        position: fixed;
        bottom: 0;
        right: 0;
        max-width: 300px;
        font-size: 10px;
        opacity: 0.9;
        background: #DDD;
        box-shadow: -2px -2px 4px 4px rgba(0, 0, 0, 0.3);
      }

      #dict-title * {
        font-size: 10px!important;
      }
      
      #mdict-online-viewer {
        font-size: 14px;
        font-family: "Georgia", "Times New Roman";
        height: 600px;
        width: 100%;
      }
      
      #mdict-online-viewer #definition {
        font-size: 14px;
        height: 500px;
        overflow: auto;
      }
      
      #word + .selectize-control {
        display: inline-block;
        min-width: 18em;
      }

    </style>
    <script type="text/javascript" src="conf.js"></script>
    <script src="require.js" data-main="mdict"></script>
  </head>
  <body>
    <section class="main-content">

      <div id="mdict-online-viewer">
        Choose a dictionary file (*.mdx + optional *.mdd): <input id="dictfile" type="file" multiple>
        <p>
        <input id="word" type="text" value="">
        <input id="btnLookup" type="button" value="look up" disabled="false">

        <div id="dict-title"></div>
        <div id="definition">
        </div>
      </div>
      
    </section>
    <script>
      function AbstractFile(url) {    
        this.name=url;
        this.slice = async(offset, length) =>{    
          const headers = new Headers();
          headers.append( 'Range', 'bytes=' + offset + '-' + ( offset + length ).toString() );

          const opts = {
            credentials: 'include',
            headers    : headers
          };

          const resp = await fetch( this.name, opts );
          alert(resp.type);
          return await resp.blob();
        }
      }
      //?url=#word=
      let url = location.search.substring(5);
      let word = location.hash.substring(6);
      var fileList = [new AbstractFile(url)];

      var mdict;
      define('mdict-parseXml', function() {
        return function (str) {
          return (new DOMParser()).parseFromString(str, 'text/xml');
        }
      });

      require(['jquery', 'mdict-common', 'mdict-parser', 'mdict-renderer', 'selectize'], function($, MCommon, MParser, MRenderer, Selectize) {
        $('#btnLookup').addClass('stripes');
        $('#word').on('keyup', function(e) { e.which === 13 && $('#btnLookup').click(); });
      MParser(fileList).then(function(resources) {
        mdict = MRenderer(resources);

        function doSearch(phrase, offset) {
          console.log(phrase + '');
          mdict.lookup(phrase, offset).then(function($content) {
            $('#definition').empty().append($content.contents());
            console.log('--');
          });
        }
        
        $('#dict-title').html((resources['mdx'] || resources['mdd']).value().description || '** no description **');
        mdict.render($('#dict-title'));

        $('#btnLookup')
          .attr('disabled', false)
          .off('.#mdict')
          .on('click.#mdict', function() {
            doSearch($('#word').val());
          }).click();
        $('#word')[0].selectize.destroy();

        $('#word').selectize({
          plugins: ['restore_on_backspace'],
          maxItems: 1,
          maxOptions: 1 << 20,
          valueField: 'value',
          labelField: 'word',
          searchField: 'word',
          delimiter: '~~',
          loadThrottle: 10,
          create: function(v, callback) {
            return callback({word: v, value: v});
          },
          createOnBlur: true,
          closeAfterSelect: true,
          allowEmptyOption: true,
          score: function(search) {
            var score = this.getScoreFunction(search);
            return function(item) {return 1;};
          },
          load: function(query, callback) {
            var self = this;
            if (!query.length) {
              this.clearOptions();
              this.refreshOptions();
              return;
            };
            mdict.search({phrase: query, max: 5000}).then(function(list) {
              //                  console.log(list.join(', '));
              // TODO: filter candidate keyword starting with "_"
              list = list.map(function(v) {
                return {word: v, value: v.offset};
              });
              self.clearOptions();
              callback(list);
            });
          },
          onChange: function(value) {
            var item = this.options[value];
            if (item) {
              var value = item.word;
              doSearch(value, value.offset);
              $('#word').val(value);
            } else {
              $('#definition').empty();
            }
          },
        });
      });
      });
    </script>
  </body>
</html>