<template>
  <b-modal
    id="modal-snmp"
    ref="modal"
    :title="$t('global.action.add')"
    @hidden="resetForm"
  >
    <b-form id="form-snmp" @submit.prevent="handleSubmit">
      <b-row>
        <b-col sm="6">
          <b-form-group
            :label="$t('pageTransfer.snmp.host')"
            label-for="snmpHost"
          >
            <b-form-input
              id="snmpHost"
              v-model="host"
              type="text"
              :state="getValidationState($v.host)"
              data-test-id="snmp-input-host"
              @input="$v.host.$touch()"
            />
            <b-form-invalid-feedback role="alert">
              <template v-if="!$v.host.required">
                {{ $t('global.form.fieldRequired') }}
              </template>
              <template v-if="!$v.host.ipAddress">
                {{ $t('global.form.invalidFormat') }}
              </template>
            </b-form-invalid-feedback>
          </b-form-group>
        </b-col>
        <b-col sm="6">
          <b-form-group
            :label="$t('pageTransfer.snmp.port')"
            label-for="snmpPort"
          >
            <b-form-input
              id="snmpPort"
              v-model="port"
              type="number"
              :state="getValidationState($v.port)"
              data-test-id="snmp-input-port"
              @input="$v.port.$touch()"
            />
            <b-form-invalid-feedback role="alert">
              <template v-if="!$v.port.required">
                {{ $t('global.form.fieldRequired') }}
              </template>
              <template v-if="!$v.port.ipAddress">
                {{ $t('global.form.invalidFormat') }}
              </template>
            </b-form-invalid-feedback>
          </b-form-group>
        </b-col>
      </b-row>
    </b-form>
    <template #modal-footer="{ cancel }">
      <b-button variant="secondary" @click="cancel()">
        {{ $t('global.action.cancel') }}
      </b-button>
      <b-button form="form-snmp" type="submit" variant="primary" @click="onOk">
        {{ $t('global.action.add') }}
      </b-button>
    </template>
  </b-modal>
</template>

<script>
import VuelidateMixin from '@/components/_sila/Mixins/VuelidateMixin.js';
import { helpers, ipAddress, required } from 'vuelidate/lib/validators';
import { isoPortRegex } from '@/utilities/_sila/regexConstants';

export default {
  mixins: [VuelidateMixin],
  data() {
    return {
      form: {
        Destination: null,
        SubscriptionType: 'SNMPTrap',
        Protocol: 'SNMPv2c',
        Context: 'testContext',
      },
      host: null,
      port: null,
    };
  },
  validations() {
    return {
      host: {
        required,
        ipAddress,
      },
      port: {
        required,
        pattern: helpers.regex('pattern', isoPortRegex),
      },
    };
  },
  methods: {
    handleSubmit() {
      this.$v.$touch();
      if (this.$v.$invalid) return;

      this.$emit('ok', {
        ...this.form,
        Destination: `snmp://${this.host}:${this.port}`,
      });
      this.closeModal();
    },
    closeModal() {
      this.$nextTick(() => {
        this.$refs.modal.hide();
      });
    },
    resetForm() {
      this.host = null;
      this.port = null;
      this.form.Destination = null;
      this.$v.$reset();
      this.$emit('hidden');
    },
    onOk(bvModalEvt) {
      // prevent modal close
      bvModalEvt.preventDefault();
      this.handleSubmit();
    },
  },
};
</script>

<style lang="scss" scoped>
.input-group-prepend + input {
  padding-left: 70px !important;
}
</style>
