<template>
  <div class="custom-field-search field-search-static df-center-x">
    <div class="custom-field-search__input">
      <input v-model="searchModel" type="text" :placeholder="placeholder" />

      <Icon
        :color="$_theme('colorGrey400')"
        icon="search"
        size="m"
        class="search-icon"
      />
    </div>
  </div>
</template>

<script>
import throttle from 'lodash/throttle'

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

export default {
  name: 'FieldSearchStatic',
  components: { Icon },
  props: {
    currentValue: {
      type: String
    },
    placeholder: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      searchModel: this.currentValue || ''
    }
  },
  watch: {
    searchModel: throttle(function (value) {
      if (!this.valueSettedByProps) {
        this.$emit('setSearch', {
          value,
          key: this.heritedData.key
        })
      }

      this.valueSettedByProps = false
    }, 250),
    currentValue(value) {
      if (value !== this.searchModel) {
        this.valueSettedByProps = true
        this.searchModel = value
      }
    }
  },
  created() {
    this.valueSettedByProps = false
  }
}
</script>

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