<template>
  <v-container>
    <v-layout row wrap class="home-search-input">
      <v-flex xs6 offset-xs3 class="home-search-btn">
        <v-form @submit.prevent="search">
          <v-text-field
            ref="input"
            v-model="searchText"
            append-icon="search"
            label="Search by: project, patients, application or keywords."
            class="mt-1 ml-1"
            autofocus
            light
            hide-details
            single-line
            @keyup.esc="clearText"
            @blur="keepFocus"/>
        </v-form>
      </v-flex>
    </v-layout>
  </v-container>
</template>

<script>
import { SHOW_PANEL } from '@/store/actions/panels'

export default {
  name: 'HomeSearchInput',
  data () {
    return {
      searchText: ''
    }
  },
  computed: {
    permanentFocus () {
      return this.$store.getters.areAllModalsHidden
    }
  },
  methods: {
    clearText () {
      this.searchText = undefined
    },
    search () {
      this.$store.dispatch(SHOW_PANEL, { search: this.searchText })
    },
    keepFocus () {
      this.permanentFocus && this.$refs.input.focus()
    }
  }
}
</script>

<style lang="scss">
.home-search-input {
  margin-top: 30% !important;
}
.home-search-input .v-input {
  font-size: 40px;
  input {
    max-height: 1.2em;
  }
  .v-text-field__slot {
    margin-bottom: 10px;
  }
  label {
    font-size: 25px;
    height: 1em;
    margin-top: 16px;
  }
  .v-icon {
    font-size: 40px;
    margin-top: 30px;
  }
}
</style>
