import { encodeTool } from '/_js/functions.js'

FA = FileAttachment

// Load the toolbox
families = await FA("/families.json").json()
_toolbox = await FileAttachment("/toolbox/toolbox.json").json()
toolbox = _toolbox.map( tool => encodeTool(tool) )

// console.log(toolbox)

addEncodedTools = (virus) => {
  return ({ ... virus, tools: toolbox.flatMap( tool => virus[tool.encoded] ? tool.id : []) }) 
}

// Load all Newick tree file and create a dictionary `family -> tree`
nwks = await Promise.all(
  families.map(async (family) => { 
    let tree = await FA("/"+ family + "/tree.newick").text()
    return ({ family: family, nwk: tree })
  }))
nwksAsMap = Object.fromEntries(nwks.map( el => [el.family, el.nwk] ))

// console.log(nwks)

// Load annotations for viruses for each family
_annotations = await Promise.all(
  families.map( async (family) => {
    let xls = await FA("/"+ family + "/family.xlsx").xlsx()
    let _annotations = xls.sheet(0, { headers: true, range: ":L" })

    let _trimmed = _annotations.map( virus => {
      let trimmed = {}
      Object.keys(virus).forEach( key => {
        trimmed[key] = virus[key].trim()
      })
      return trimmed
    })

    return _trimmed.map( virus => ({... virus, family: family }) )
  }))

// console.log(_annotations)

// Add tools information, just the list of tools ids
annotations = _annotations
  .flat()
  .map( virus => addEncodedTools(virus) )

run_ = toolbox.map(tool => {
    const $t = $("#" + tool.id + "-table")
    const data = annotations
      .filter( virus => virus.tools.includes(tool.id))
    $t.bootstrapTable( { data: data })
  })

// Render jumbotron and toolbox
html`
  <div class="col-xs-12" style="height:20px;"></div>

  <div class="left-right-container" style="--bs-gap: 10;">

    <!-- Jumbotron -->
    <div class="left jumbotron" id="jumbotron-container">
      <h1 class="display-4">Viral Toolbox</h1>
      <p class="lead">This page provides an overview of the different tools or assays in the viral toolbox.</p>
      <p>Please scroll down or click on the tool of interest</p>
    </div>

    <!-- Toolbox -->
    <div class="right">
        <div class="toolbox">
          <div id="toolbox-contents" class="tool-container">
            ${toolbox.map(tool => 
              html`
                <a href="#${tool.id}-section" target="_top">
                  <div class="tool-wrapper">
                    <div id="${tool.id}" class="tool">
                      <div class="tool-tooltip-text">${tool.name}</div>
                      ${tool.icon.map( i =>
                        html`<img class="tool-icon" height="${(tool.icon.length > 1) ? 150/tool.icon.length : 100}%" src="${i}"/>`
                      )}
                    </div>
                  </div>
                </a>
              `
            )}
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="col-xs-12" style="height:40px;"></div>
`

html`
  ${toolbox.map(tool => 
    html`
      <h2 id="${tool.id}-section">${tool.name}</h2>
      <div class="container grid">
        <div class="g-col-md-3 g-col-12 toolbox one-tool" style="text-align:center;">
          <div class="tool-container">
            <div class="tool-wrapper">
              <div id="${tool.id}" class="tool">
                <div class="tool-tooltip-text">${tool.name}</div>
                ${tool.icon.map( i =>
                  html`<img class="tool-icon" height="${(tool.icon.length > 1) ? 150/tool.icon.length : 100}%" src="${i}"/>`
                )}
              </div>
            </div>
          </div>
        </div>
        <div class="g-col-md-9 g-col-12">
          ${tool.description}
          <div class="col-xs-12" style="height:30px;"></div>
        </div>

      <div class="g-col-12" style="padding-top: 20px">
          <table id="${tool.id}-table" data-pagination="true class="table table-striped table-borderless">
            <thead>
              <tr>
                <th data-field="family" data-sortable="true" data-formatter="familyFormatter">Virus Family</th>
                <th data-field="virus_name" data-sortable="true" data-formatter="virusFormatter">Virus</th>
                <th data-field="abbreviation" data-formatter="virusFormatter" data-align="center">Virus ID</th>
              </tr>
            </thead>
          </table>
        </div>

        <div class="g-col-1" style="text-align:center;">
        </div>
      </div>
      <div class="col-xs-12" style="height:30px;"></div>
    `
  )}
`

BootstrapTable = require("bootstrap-table@1.22.1")