<script>
import { GlFormGroup, GlFormInput, GlFormCheckbox } from '@gitlab/ui';
import { initFormField } from 'ee/security_configuration/utils';
import { __ } from '~/locale';
import validation from '~/vue_shared/directives/validation';

export default {
  components: {
    GlFormGroup,
    GlFormInput,
    GlFormCheckbox,
  },
  directives: {
    validation: validation(),
  },
  props: {
    value: {
      type: Object,
      required: false,
      default: () => ({}),
    },
    showValidation: {
      type: Boolean,
      required: false,
      default: false,
    },
  },
  data() {
    const {
      enabled,
      url,
      username,
      password,
      // default to commonly used names for `username` and `password` fields in authentcation forms
      usernameField = 'username',
      passwordField = 'password',
    } = this.value.fields;

    const isEditMode = Object.keys(this.value.fields).length > 0;

    return {
      form: {
        state: false,
        fields: {
          enabled: initFormField({ value: enabled, skipValidation: true }),
          url: initFormField({ value: url }),
          username: initFormField({ value: username }),
          password: isEditMode
            ? initFormField({ value: password, required: false, skipValidation: true })
            : initFormField({ value: password }),
          usernameField: initFormField({ value: usernameField }),
          passwordField: initFormField({ value: passwordField }),
        },
      },
      isEditMode,
      isSensitiveFieldRequired: !isEditMode,
    };
  },
  computed: {
    showValidationOrInEditMode() {
      return this.showValidation || this.isEditMode;
    },
    sensitiveFieldPlaceholder() {
      return this.isEditMode ? __('[Unchanged]') : '';
    },
  },
  watch: {
    form: { handler: 'emitUpdate', immediate: true, deep: true },
  },
  methods: {
    emitUpdate() {
      this.$emit('input', this.form);
    },
  },
};
</script>

<template>
  <section>
    <gl-form-group :label="s__('DastProfiles|Authentication')">
      <gl-form-checkbox v-model="form.fields.enabled.value" data-testid="auth-enable-checkbox">{{
        s__('DastProfiles|Enable Authentication')
      }}</gl-form-checkbox>
    </gl-form-group>
    <div v-if="form.fields.enabled.value" data-testid="auth-form">
      <div class="row">
        <gl-form-group
          :label="s__('DastProfiles|Authentication URL')"
          :invalid-feedback="form.fields.url.feedback"
          class="col-md-6"
        >
          <gl-form-input
            v-model="form.fields.url.value"
            v-validation:[showValidationOrInEditMode]
            name="url"
            type="url"
            required
            :state="form.fields.url.state"
          />
        </gl-form-group>
      </div>
      <div class="row">
        <gl-form-group
          :label="s__('DastProfiles|Username')"
          :invalid-feedback="form.fields.username.feedback"
          class="col-md-6"
        >
          <gl-form-input
            v-model="form.fields.username.value"
            v-validation:[showValidationOrInEditMode]
            autocomplete="off"
            name="username"
            type="text"
            required
            :state="form.fields.username.state"
          />
        </gl-form-group>
        <gl-form-group
          :label="s__('DastProfiles|Password')"
          :invalid-feedback="form.fields.password.feedback"
          class="col-md-6"
        >
          <gl-form-input
            v-model="form.fields.password.value"
            v-validation:[showValidationOrInEditMode]
            autocomplete="off"
            name="password"
            type="password"
            :placeholder="sensitiveFieldPlaceholder"
            :required="isSensitiveFieldRequired"
            :state="form.fields.password.state"
          />
        </gl-form-group>
      </div>
      <div class="row">
        <gl-form-group
          :label="s__('DastProfiles|Username form field')"
          :invalid-feedback="form.fields.usernameField.feedback"
          class="col-md-6"
        >
          <gl-form-input
            v-model="form.fields.usernameField.value"
            v-validation:[showValidationOrInEditMode]
            name="usernameField"
            type="text"
            required
            :state="form.fields.usernameField.state"
          />
        </gl-form-group>
        <gl-form-group
          :label="s__('DastProfiles|Password form field')"
          :invalid-feedback="form.fields.passwordField.feedback"
          class="col-md-6"
        >
          <gl-form-input
            v-model="form.fields.passwordField.value"
            v-validation:[showValidationOrInEditMode]
            name="passwordField"
            type="text"
            required
            :state="form.fields.passwordField.state"
          />
        </gl-form-group>
      </div>
    </div>
  </section>
</template>
