<template>
  <div v-if="scan.status == 'FAILED' || error">
    <h2 id="scan-status">
      Error
    </h2>
    <h5
      id="sub-status"
      style="color: #B30000; border-bottom: unset;"
    >
      {{ error || scan.error }}
    </h5>
  </div>
  <div v-else-if="scan.status == 'LOADING' || loading">
    <Loading style="margin: 0px auto; display: block;" />
    <h2 id="scan-status">
      Loading...
    </h2>
  </div>
  <div v-else-if="scan.status == 'NO_RESULTS'">
    <h2 id="scan-status">
      No Scans Found
    </h2>
  </div>
  <div v-else>
    <router-link
      :to="`/scan/${scan.target}/${scan.id}`"
      style="text-decoration: none;"
    >
      <h2
        v-if="scan.status == 'IN_PROGRESS'"
        id="scan-status"
      >
        Scanning in Progress
      </h2>
      <h2
        v-else
        id="scan-status"
      >
        Scan Result
      </h2>
    </router-link>

    <h5 id="sub-status">
      {{ normalizeDate(scan.created_at) }}
    </h5>

    <div v-if="scan.status == 'IN_PROGRESS'">
      <ScanProgress
        title="TCP"
        :percentage="scan.tcp_progress"
      />
      <ScanProgress
        title="UDP"
        :percentage="scan.udp_progress"
      />
      <ScanProgress
        title="Total"
        :percentage="scan.total_progress"
      />
    </div>

    <PortList :ports="scan.results" />
  </div>
</template>

<script>
import Loading from '../components/Loading.vue'
import PortList from '../components/PortList.vue'
import ScanProgress from '../components/ScanProgress.vue'

export default {
    name: 'ScanResult',
    components: {
        Loading,
        PortList,
        ScanProgress,
    },
    props: {
        scan: {
            type: Object,
            required: true
        },
        error: {
            type: String,
            default: null
        },
        loading: Boolean
    },
    methods: {
        /**
         * Converts a dateISO string to a more presentable format.
         **/
        normalizeDate(dateISO) {
            let parsedDate = new Date(dateISO);
            return parsedDate.toDateString() + " " + parsedDate.toLocaleTimeString()
        }
    }
}
</script>

<style scoped>
#scan-status {
    color: #EAECE9;
    text-align: center;
    margin: 0px;
}

#sub-status {
    text-align: center;
    width: 190px;
    margin: -5px auto 10px auto;
    border-bottom: 1px solid;
}
</style>
