import {DOMAIN_LIST, QUESTION_DOMAIN_CLASS, parseQuestions, firstByRegion, scoreRows, dash} from "./assets/helpers.js"
dsv = require("d3-dsv@3")
scores = FileAttachment("data/scores.csv").csv({typed: true})
inclusion = FileAttachment("data/inclusion.csv").csv({typed: true})
responses = firstByRegion(await FileAttachment("data/responses.csv").csv(), "region")
questions = parseQuestions(dsv.csvParseRows(await FileAttachment("data/questions.csv").text()))
regions = [...new Set(inclusion.filter(r => r.include === "Yes").map(r => r.region))].sort()
initialRegion = decodeURIComponent(location.hash.slice(1))

viewof region = Inputs.select(["", ...regions], {
  label: "Region",
  value: regions.includes(initialRegion) ? initialRegion : ""
})

regionScores = {
  if (!region) return html``;
  const row = scores.find(r => r.region === region);
  if (!row) return html`<p style="text-align:center">No scores available for this region.</p>`;
  const rows = scoreRows(row);
  return html`<div id="region-scores"><table class="table">
      <thead><tr><th></th><th>Score</th><th>Rank</th></tr></thead>
      <tbody>${rows.map(r => html`<tr class=${r.key === "all_domain" ? "overall" : ""}>
      <td style=${"color:" + r.color}>${r.label}</td>
      <td style=${"color:" + r.color}>${r.score}</td>
      <td style=${"color:" + r.color}>${r.rank}</td>
      </tr>`)}</tbody>
      </table></div>`;
}

regionResponses = {
  if (!region) return html``;
  const row = responses.find(r => r.region === region);
  if (!row) return html``;
  return html`<div class="responses">${questions.map(q => html`<div class=${QUESTION_DOMAIN_CLASS[q.domain] || ""}>
    <strong class="question">${q.question}</strong>
    <p class="scale">(Scale: ${q.scale})</p>
    <p class="response">${row[q.id] ? row[q.id] : "\u2014"}</p>
  </div>`)}</div>`;
}

regionCharacteristics = {
  if (!region) return html``;
  const row = inclusion.find(r => r.region === region);
  if (!row) return html``;
  return html`<div class="characteristics">
    <strong>Respondent organization characteristics</strong>
    <div>Region: ${dash(row.region_size)}</div>
    <div>Number of members: ${dash(row.members)}</div>
    <div>Number of members with Down syndrome or with a relative with Down syndrome: ${dash(row.related_to_ds)}</div>
  </div>`;
}