<template>
    <div id="app">
      <main role="main" class="container-fluid">
        <div style="padding-top: 64px">
          <div>
            <ul
              class="navbar-nav mr-auto"
              style="list-style:none; padding-left:0; margin:0;"
            >
              <li
                class="nav-item dropdown"
                style="position: relative; display: inline-block;"
              >
                <a
                  href="#"
                  id="igv-example-api-dropdown"
                  @click.prevent="toggleDropdown"
                  aria-haspopup="true"
                  :aria-expanded="isDropdownOpen.toString()"
                  style="color: black; cursor: pointer; user-select: none;"
                  >Tracks</a
                >
                <ul
                  v-show="isDropdownOpen"
                  class="dropdown-menu"
                  style="width:350px; position: absolute; top: 100%; left: 0; background: white; border: 1px solid #ccc; box-shadow: 0 2px 5px rgba(0,0,0,0.15); padding: 5px 0; margin: 0; list-style:none; z-index: 1000;"
                >
                  <li>
                    <a
                      href="#"
                      @click.prevent="loadCopyNumberTrack"
                      style="display:block; padding: 8px 20px; color: black; text-decoration: none;"
                      >Copy Number</a
                    >
                  </li>
                  <li>
                    <a
                      href="#"
                      @click.prevent="loadDbSnpTrack"
                      style="display:block; padding: 8px 20px; color: black; text-decoration: none;"
                      >dbSNP 137 (bed tabix)</a
                    >
                  </li>
                  <li>
                    <a
                      href="#"
                      @click.prevent="loadBigWigTrack"
                      style="display:block; padding: 8px 20px; color: black; text-decoration: none;"
                      >Encode bigwig</a
                    >
                  </li>
                  <li>
                    <a
                      href="#"
                      @click.prevent="loadBamTrack"
                      style="display:block; padding: 8px 20px; color: black; text-decoration: none;"
                      >1KG Bam (HG02450)</a
                    >
                  </li>
                </ul>
              </li>
            </ul>
          </div>
          <!-- 탭 콘텐츠 -->
          <div class="tab-content" id="viewerTabContent">
            <div
              class="tab-pane fade show active"
              id="igv-viewer"
              role="tabpanel"
            >
              <div style="padding-top: 20px">
                이 예제는 드롭다운 메뉴에서 동적으로 트랙을 추가하는 igv.js API의
                사용을 보여줍니다.
                위의 메뉴에서 'CopyNumber'를 선택하면 다음과 같은 호출이 실행됩니다.
                <p>
                  <pre>
                  igv.browser.loadTrack({
                      url: 'https://s3.amazonaws.com/igv.org.demo/GBM-TP.seg.gz',
                      name: 'GBM Copy # (TCGA Broad GDAC)'});
                  </pre>
                </p>
                자세한 내용은
                <a href="https://github.com/igvteam/igv.js/wiki">개발자 위키</a>를
                참조하세요.
              </div>
              <div id="igvDiv" style="padding-top: 20px"></div>
            </div>
          </div>
        </div>
      </main>
    </div>
  </template>
  
  <script>
  export default {
    name: "App",
    data() {
      return {
        browser: null,
        isDropdownOpen: false,
      };
    },
    mounted() {
      // 외부 클릭시 드롭다운 닫기
      document.addEventListener("click", this.handleClickOutside);
      this.initializeIGV();
    },
    beforeUnmount() {
      document.removeEventListener("click", this.handleClickOutside);
    },
    methods: {
      toggleDropdown() {
        this.isDropdownOpen = !this.isDropdownOpen;
      },
      closeDropdown() {
        this.isDropdownOpen = false;
      },
      handleClickOutside(event) {
        const dropdown = this.$el.querySelector("#igv-example-api-dropdown");
        const menu = this.$el.querySelector(".dropdown-menu");
        if (
          dropdown &&
          menu &&
          !dropdown.contains(event.target) &&
          !menu.contains(event.target)
        ) {
          this.closeDropdown();
        }
      },
  
      async initializeIGV() {
        await this.waitForIGV();
        await this.$nextTick();
  
        const igvDiv = document.getElementById("igvDiv");
        if (!igvDiv) {
          console.error("❌ #igvDiv가 존재하지 않습니다.");
          return;
        }
  
        const options = {
          locus: "chr1:155,160,475-155,184,282",
          genome: "hg19",
        };
  
        try {
          this.browser = await igv.createBrowser(igvDiv, options);
          window.igv = { browser: this.browser };
          this.addBaseClickEvent();
          this.browser.on("locuschange", this.addBaseClickEvent);
          this.browser.on("trackclick", this.addBaseClickEvent);
        } catch (error) {
          console.error("IGV 브라우저 생성 중 오류:", error);
        }
      },
      waitForIGV() {
        return new Promise((resolve) => {
          const checkIGV = () => {
            if (typeof igv !== "undefined") {
              resolve();
            } else {
              setTimeout(checkIGV, 100);
            }
          };
          checkIGV();
        });
      },
      addBaseClickEvent() {
        setTimeout(() => {
          const texts = document.querySelectorAll("#igvDiv text");
          texts.forEach((text) => {
            const base = text.textContent;
            if (["A", "T", "C", "G"].includes(base)) {
              text.style.cursor = "pointer";
              text.onclick = () => {
                text.textContent = this.getComplement(text.textContent);
              };
            }
          });
        }, 300);
      },
      getComplement(base) {
        switch (base) {
          case "A":
            return "T";
          case "T":
            return "A";
          case "C":
            return "G";
          case "G":
            return "C";
          default:
            return base;
        }
      },
      loadCopyNumberTrack() {
        if (this.browser) {
          this.browser.loadTrackList = this.browser.loadTrackList.bind(this.browser);
          this.browser.loadTrackList([
            {
              url: "https://s3.amazonaws.com/igv.org.demo/GBM-TP.seg.gz",
              indexed: false,
              isLog: true,
              name: "GBM Copy # (TCGA Broad GDAC)",
            },
          ]);
        }
        this.closeDropdown();
      },
      loadDbSnpTrack() {
        if (this.browser) {
          this.browser.loadTrackList = this.browser.loadTrackList.bind(this.browser);
          this.browser.loadTrackList([
            {
              type: "annotation",
              format: "bed",
              url: "https://data.broadinstitute.org/igvdata/annotations/hg19/dbSnp/snp137.hg19.bed.gz",
              indexURL:
                "https://data.broadinstitute.org/igvdata/annotations/hg19/dbSnp/snp137.hg19.bed.gz.tbi",
              visibilityWindow: 200000,
              name: "dbSNP 137",
            },
          ]);
        }
        this.closeDropdown();
      },
      loadBigWigTrack() {
        if (this.browser) {
          this.browser.loadTrackList = this.browser.loadTrackList.bind(this.browser);
          this.browser.loadTrackList([
            {
              type: "wig",
              format: "bigwig",
              url: "https://s3.amazonaws.com/igv.broadinstitute.org/data/hg19/encode/wgEncodeBroadHistoneGm12878H3k4me3StdSig.bigWig",
              name: "Gm12878H3k4me3",
            },
          ]);
        }
        this.closeDropdown();
      },
      loadBamTrack() {
        if (this.browser) {
          this.browser.loadTrackList = this.browser.loadTrackList.bind(this.browser);
          this.browser.loadTrackList([
            {
              type: "alignment",
              format: "bam",
              url: "https://1000genomes.s3.amazonaws.com/phase3/data/HG02450/alignment/HG02450.mapped.ILLUMINA.bwa.ACB.low_coverage.20120522.bam",
              indexURL:
                "https://1000genomes.s3.amazonaws.com/phase3/data/HG02450/alignment/HG02450.mapped.ILLUMINA.bwa.ACB.low_coverage.20120522.bam.bai",
              name: "HG02450",
            },
          ]);
        }
        this.closeDropdown();
      },
    },
  };
  </script>
  
  <style>
  #app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #2c3e50;
  }
  
  pre {
    padding: 10px;
    border-radius: 4px;
  }
  
  .nav-tabs {
    margin-bottom: 20px;
  }
  
  .tab-content {
    padding-top: 20px;
  }
  </style>
  