<template>
  <div>
    <div style="padding: 250px 0px 40px; position: relative; width: 300px; margin: 0px auto;">
      <div
        v-if="this.$store.state.ws_connected"
        id="overseer-websocket"
        style="background-color: #0E6A0E;"
      />
      <div
        v-if="!this.$store.state.ws_connected"
        id="overseer-websocket"
        style="background-color: #B30000;"
      />
      <div style="font-weight: 700; font-size: 4em; position: relative;">
        Overseer
      </div>
    </div>

    <input
      id="overseer-search"
      placeholder="IP Address / Hostname"
      type="text"
      @keyup.enter="onSubmit"
    ><br>
    <h5
      v-if="error != null"
      class="error"
    >
      {{ error }}
    </h5>
    <Loading
      v-if="loading"
      style="margin-top: 50px;"
    />
  </div>
</template>

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

export default {
    name: 'OverseerHome',
    components: {
        Loading,
    },
    data() {
        return {
            error: null,
            loading: false,
        }
    },
    methods: {
        /**
         * Initiates a new scan for the inputted hostname / IP address.
         * Routes the user to the history view of the requested target.
         **/
        onSubmit(event){
            this.loading = true;
            this.error = null;
            this.$store.dispatch("performScan", event.target.value)
                .then(scan => {
                    if (scan.error)
                        throw new Error(scan.error)
                    this.$router.push({ path: `/scan/${event.target.value}` })
                    // this.$router.push({ path: `/scan/${event.target.value}/${scan.id}` })
                }).catch(err => {
                    this.error = err;
                }).finally(() => {
                    this.loading = false;
                });
        }
    }
}
</script>

<style scoped>
#overseer-search::placeholder{
    text-align: center;
}

#overseer-search {
    width: 400px;
    height: 40px;
    border-radius: 5px;
    text-align: center;
    font-size: 1rem;
    padding: .3rem .8rem;
    text-indent: 0px;
    outline: none;
    border: 0px solid;
}

#overseer-websocket {
    height: 40px;
    width: 40px;
    border-radius: 20px;
    position: absolute;
    left: 19px;
    bottom: 66px;
}

.error {
    margin-top: 5px;
    color: #B30000;
}
</style>
