<script>
import { GlFormGroup, GlFormInput } from '@gitlab/ui';
import { uniqueId } from 'lodash';
import { s__ } from '~/locale';

const VALIDATION_STATE = {
  NO_VALIDATION: null,
  INVALID: false,
  VALID: true,
};

export default {
  name: 'TextWidget',
  components: {
    GlFormGroup,
    GlFormInput,
  },
  props: {
    label: {
      type: String,
      required: true,
    },
    description: {
      type: String,
      required: false,
      default: null,
    },
    placeholder: {
      type: String,
      required: false,
      default: null,
    },
    invalidFeedback: {
      type: String,
      required: false,
      default: s__('PipelineWizardInputValidation|This value is not valid'),
    },
    id: {
      type: String,
      required: false,
      default: () => uniqueId('textWidget-'),
    },
    pattern: {
      type: String,
      required: false,
      default: null,
    },
    validate: {
      type: Boolean,
      required: false,
      default: false,
    },
    required: {
      type: Boolean,
      required: false,
      default: false,
    },
    default: {
      type: String,
      required: false,
      default: null,
    },
  },
  data() {
    return {
      touched: false,
      value: this.default,
    };
  },
  computed: {
    validationState() {
      if (!this.showValidationState) return VALIDATION_STATE.NO_VALIDATION;
      if (this.isRequiredButEmpty) return VALIDATION_STATE.INVALID;
      return this.needsValidationAndPasses ? VALIDATION_STATE.VALID : VALIDATION_STATE.INVALID;
    },
    showValidationState() {
      return this.touched || this.validate;
    },
    isRequiredButEmpty() {
      return this.required && !this.value;
    },
    needsValidationAndPasses() {
      return !this.pattern || new RegExp(this.pattern).test(this.value);
    },
    invalidFeedbackMessage() {
      return this.isRequiredButEmpty
        ? s__('PipelineWizardInputValidation|This field is required')
        : this.invalidFeedback;
    },
  },
  watch: {
    validationState(v) {
      this.$emit('update:valid', v);
    },
    value(v) {
      this.$emit('input', v.trim());
    },
  },
  created() {
    if (this.default) {
      this.$emit('input', this.value);
    }
  },
};
</script>

<template>
  <div data-testid="text-widget">
    <gl-form-group
      :description="description"
      :invalid-feedback="invalidFeedbackMessage"
      :label="label"
      :label-for="id"
      :state="validationState"
    >
      <gl-form-input
        :id="id"
        v-model="value"
        :placeholder="placeholder"
        :state="validationState"
        type="text"
        @blur="touched = true"
      />
    </gl-form-group>
  </div>
</template>
