<template>
  <v-container pt-0 mb-2>
    <v-layout row justify-start align-center ml-1>
      <h2 class="primary--text pull-left mb-2">Files</h2>
    </v-layout>
    <v-layout class="results-files" row justify-start align-center mx-1>

      <!-- List of Files -->
      <ul>
        <li
          v-for="(file, index) in files"
          :key="index">
          <div class="results-file" @click="openFile(file)">
            <v-avatar size="30">
              <v-icon class="grey lighten-1 white--text" small>
                {{ file.type === 'text' ? 'folder' : (file.type === 'pdf' ? 'attach_file' : 'web')}}
              </v-icon>
            </v-avatar>
            <span>
              {{ getFilename(file) }}
            </span>
          </div>
        </li>
      </ul>

      <!-- Modal -->
      <v-dialog
        v-model="dialog"
        content-class="results-text-dialog"
        lazy
        scrollable>
        <v-card>

          <!-- Modal Header -->
          <v-card-title class="panel-slot-actions">
            <h1 :style="{ margin: 'auto'}" class="font-weight-thin primary--text text-xs-center">
              {{ getFilename(currentFile) }}
            </h1>
            <v-tooltip top>
              <v-icon
                slot="activator"
                small
                class="primary--text"
                @click="dialog = false">
                close
              </v-icon>
              <span>Close file</span>
            </v-tooltip>
          </v-card-title>

          <!-- For Plain Text Files -->
          <v-card-text v-if="currentFile.type === 'text'" class="v-markup">
            <code>{{ currentFile.content }}</code>
          </v-card-text>

          <!-- For Embedded HTML Files -->
          <v-card-text  v-if="currentFile.type === 'html'" class="v-markup">
            <iframe :srcdoc="currentFile.content" />
          </v-card-text>

          <v-divider/>

          <!-- Modal Footer -->
          <v-card-actions class="justify-end">
            <v-btn
              flat="flat"
              data-test="close-file"
              color="primary darken-1"
              class="pull-right"
              @click="dialog = false">
              Close File
            </v-btn>
          </v-card-actions>

        </v-card>
      </v-dialog>
    </v-layout>
  </v-container>
</template>

<script>
export default {
  name: 'FileResults',
  data () {
    return {
      currentFile: {},
      dialog: false,
      files: [{
        path: 'my-test-file.logs',
        type: 'text'
      },
      {
        path: 'my-test-report.html',
        type: 'html'
      },
      {
        path: 'my-table.html',
        type: 'embedded-html'
      },
      {
        path: 'https://arxiv.org/pdf/1809.08771.pdf',
        type: 'pdf'
      }]
    }
  },
  methods: {
    getFilename (file) {
      return file.path ? file.path.replace(/^.*[\\/]/, '') : ''
    },
    openFile (file) {
      if (['pdf', 'html'].includes(file.type)) {
        window.open(file.path)
      } else {
        this.currentFile = file
        fetch(file.path, { mode: 'no-cors' })
          .then(response => response.text())
          .then(text => {
            this.currentFile.content = text
            this.dialog = true
          })
      }
    }
  }
}
</script>

<style lang="scss">
.results-files {
  ul {
    padding: 0px;
  }
  li {
    list-style-type: none;
    text-align: start;
    margin: 2px;
    margin-left: 0px;
  }
}
.results-file {
  cursor: pointer;
  margin-right: 20px;
  white-space: nowrap;
  overflow: hidden;
  .v-avatar {
    margin-right: 4px;
  }
}
.results-text-dialog {
  max-width: 1500px;
  width: 80vh;
  max-height: 80vh;
  height: auto;
  .v-card__text {
    padding: 0px;
    margin: 0px
  }
  ::-webkit-scrollbar {
    width: 0px;
    height: 0px;
  }
  iframe {
    width: 100%;
    border: none;
    height: -webkit-fill-available;
  }
}
.v-markup {
  padding: 0px;
  code {
    text-align: start;
    align-items: center;
    box-shadow: none;
    text-shadow: none;
    display: flex;
    position: relative;
    overflow-x: auto;
    overflow-y: auto;
    margin: 0px;
    top: 0px;
    color: rgb(255, 255, 255);
    border-radius: 0px;
    background: rgb(45, 45, 45);
    font-size: 1em;
    padding: 0 30px 0 30px;
  }
}

</style>
