<template>
  <div class="custom-welcome-search">
    <Title tag="h4" :dark-mode="true" class="custom-welcome-search__title">
      {{ welcomeTitle }} {{ welcomeSubtitle }}
    </Title>

    <FieldSearchRequest
      :has-dropdown="true"
      :results-on-main="true"
      :searchKey="searchKey"
      :limit="8"
      :in="allowedFilters"
      :placeholder="$_tr('input')"
      :onValidate="validateFunction"
    />
  </div>
</template>

<script>
import GlobalSearchMixin from './mixins/global-search-mixin'
import FieldSearchRequest from './fields/FieldSearchRequest'

import { Title } from 'inside-collection/atoms'

import { formatHref } from '@inside-library/helpers/Langs'

import InterpretedData from '@inside-library/mixins/interpreted-data'

export default {
  name: 'WelcomeSearches',
  $_i18nRootPath: 'customs.SEARCHES.welcome',
  components: {
    FieldSearchRequest,
    Title
  },
  mixins: [GlobalSearchMixin, InterpretedData],
  data() {
    return {
      searchKey: 'welcome-search',
      validateFunction: null
    }
  },
  computed: {
    /**
     * Variables available for the settings
     * @return {Object}
     */
    fieldVariables(searchModel) {
      return {
        today: this.$_formatDate(new Date(), 'LLLL'),
        firstname: this.getUserInfos.firstname,
        lastname: this.getUserInfos.lastname
      }
    },
    /**
     * WelcomeSearch H1 text, from settings or fallback
     * @return {String}
     */
    welcomeTitle() {
      const fallback = `${this.$_tc('title', [this.getUserInfos.firstname])}`

      const text = this.$store.getters.getInsideSettings(
        `homepage.welcome_title_homepage_${this.$_currentLang}`
      )

      return text ? this.interpretedData(text, this.fieldVariables) : fallback
    },
    /**
     * WelcomeSearch p text, from settings or fallback
     * @return {String}
     */
    welcomeSubtitle() {
      const fallback = this.$_tc('subtitle', [this.fieldVariables.today])

      const text = this.$store.getters.getInsideSettings(
        `homepage.welcome_subtitle_homepage_${this.$_currentLang}`
      )

      return text ? this.interpretedData(text, this.fieldVariables) : fallback
    },
    textColor() {
      return this.$store.getters.getInsideSettings(
        'homepage.heromodule_textcolor'
      )
    }
  },
  mounted() {
    this.validateFunction = this.redirectToSolrSearch
  },
  methods: {
    redirectToSolrSearch(searchModel) {
      this.$router.push(
        formatHref(
          {
            name: 'SolrSearchesPage',
            query: {
              search: searchModel
            }
          },
          this.$_currentLang
        )
      )
    }
  }
}
</script>

<style lang="scss">
@use '../../styles/modules/inside-customs/searches/welcome-searches.scss' as *;
</style>
