<template>
  <div id="app">
    <!-- Add a navigation bar with Bootstrap -->
    <nav class="navbar navbar-expand-md navbar-light bg-light">
      <div class="container">
        <a class="navbar-brand" href="#">LEAF Portfolio Link</a>
        <div class="collapse navbar-collapse" id="navbarNav">
          <ul class="navbar-nav">
            <li class="nav-item">
              <a class="nav-link" href="#">Template Download</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Contact</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">About</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>
  <div v-if="true === true">
    <UserLogin></UserLogin>
  </div>
  <div id="main" v-else>
  <div v-if="invalidDataHeaders.length > 1000">
    <InvalidData :invalidDataHeaders="invalidDataHeaders"/>
  </div>
  <div v-else>
    <FileUpload @parsedUpload="processUpload"></FileUpload>
    <MissingHeaderBox v-if="!this.isCorrectHeaders" @correctionsSubmitted="headersFixed"></MissingHeaderBox>
  </div>
  </div>
    <!-- Add a footer with Bootstrap -->
    <footer class="bg-light text-center text-lg-start">
      <div class="container p-4">
        <div class="row">
          <div class="col-lg-6 col-md-12 mb-4 mb-md-0">
            <h5 class="text-uppercase">LEAF Portfolio Link</h5>
            <p>
              Simplifed and secure portfolio gateway.
            </p>
          </div>
        </div>
      </div>

      <div class="text-center p-3" style="background-color: #e9ecef;">
        © 2023 LEAF Commercial Capital. All rights reserved.
      </div>
    </footer>
  </div>
</template>
//TODO: Add template file download
//TODO: Add template file download reminder on document failure
//TODO: Add error notifications
//FIXME: Invalid data set to >1000

<script>
import FileUpload from './components/FileUpload.vue';
import MissingHeaderBox from './components/MissingHeaderBox.vue';
import InvalidData from './components/InvalidData.vue';
import UserLogin from './components/UserLogin.vue';
import { store } from './store';

export default {
  name: 'App',
  components: {
    FileUpload,
    MissingHeaderBox,
    InvalidData,
    UserLogin
},
  data() {
    return {
      store,
      // The user uploaded excel doc
      userFile: null,
      // If the headers are correct we can upload the file
      isCorrectHeaders: false,
      // True when headers with invalid data are present
      invalidDataHeaders: [],
    };
  },
  methods: {
    processUpload(userFile, invalidHeaders) {
      // handle null
      if (userFile === null) {
        this.invalidDataHeaders = [];
        this.isCorrectHeaders = false;
        return;
      }

      // set the userFile property
      this.userFile = userFile;

      // filter the documentHeaders to get the invalid headers
      // Will always return an array
      this.invalidDataHeaders = invalidHeaders;
      console.info("Invalid headers: ", this.invalidDataHeaders);

      // set isUploaded to true
      this.isUploaded = true;
    },
    headersFixed() {
      this.isCorrectHeaders = true;
    }
    // uploadFile() {
    //   // We know the document is correct
    //   //TODO: send the file to the server
    // },
  },
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
