import debounce from 'lodash/debounce';
import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';

var script = {
  name: 'GlFormCharacterCount',
  props: {
    /**
     * Input value
     */
    value: {
      type: String,
      required: false,
      default: ''
    },
    /**
     * Character count limit for the input.
     */
    limit: {
      type: Number,
      required: true
    },
    /**
     * id attribute for the character count text. Input should have `:aria-describedby="countTextId"`
     */
    countTextId: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      remainingCount: this.initialRemainingCount(),
      remainingCountSrOnly: this.initialRemainingCount()
    };
  },
  computed: {
    isOverLimit() {
      return this.remainingCount < 0;
    },
    isOverLimitSrOnly() {
      return this.remainingCountSrOnly < 0;
    },
    countTextClass() {
      return this.isOverLimit ? 'gl-text-danger' : 'gl-text-subtle';
    }
  },
  watch: {
    value(newValue) {
      this.remainingCount = this.limit - this.valueLength(newValue);
      this.debouncedUpdateRemainingCountSrOnly(newValue);
    }
  },
  created() {
    // Debounce updating the remaining character count for a second so
    // screen readers announce the remaining text after the text in the textarea.
    this.debouncedUpdateRemainingCountSrOnly = debounce(this.updateRemainingCountSrOnly, 1000);
  },
  methods: {
    valueLength(value) {
      return (value === null || value === void 0 ? void 0 : value.length) || 0;
    },
    updateRemainingCountSrOnly(newValue) {
      this.remainingCountSrOnly = this.limit - this.valueLength(newValue);
    },
    initialRemainingCount() {
      return this.limit - this.valueLength(this.value);
    }
  }
};

/* script */
const __vue_script__ = script;

/* template */
var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[_c('small',{class:['form-text', _vm.countTextClass],attrs:{"aria-hidden":"true"}},[(_vm.isOverLimit)?_vm._t("over-limit-text",null,{"count":Math.abs(_vm.remainingCount)}):_vm._t("remaining-count-text",null,{"count":_vm.remainingCount})],2),_vm._v(" "),_c('div',{staticClass:"gl-sr-only",attrs:{"id":_vm.countTextId,"aria-live":"polite","data-testid":"count-text-sr-only"}},[(_vm.isOverLimitSrOnly)?_vm._t("over-limit-text",null,{"count":Math.abs(_vm.remainingCountSrOnly)}):_vm._t("remaining-count-text",null,{"count":_vm.remainingCountSrOnly})],2)])};
var __vue_staticRenderFns__ = [];

  /* style */
  const __vue_inject_styles__ = undefined;
  /* scoped */
  const __vue_scope_id__ = undefined;
  /* module identifier */
  const __vue_module_identifier__ = undefined;
  /* functional template */
  const __vue_is_functional_template__ = false;
  /* style inject */
  
  /* style inject SSR */
  
  /* style inject shadow dom */
  

  
  const __vue_component__ = __vue_normalize__(
    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
    __vue_inject_styles__,
    __vue_script__,
    __vue_scope_id__,
    __vue_is_functional_template__,
    __vue_module_identifier__,
    false,
    undefined,
    undefined,
    undefined
  );

export default __vue_component__;
