<template>
  <page-section :section-title="$t('pageTransfer.smtp.smtpTitle')">
    <b-row class="mt-4">
      <b-col xs="12" sm="6" lg="4">
        <b-form-group
          :label="$t('pageTransfer.smtp.username')"
          label-for="smtp-name"
        >
          <b-form-input
            id="smtp-name"
            v-model="form.user"
            :disabled="$store.getters['authentication/role'] === 'ReadOnly'"
          /> </b-form-group
      ></b-col>
      <b-col xs="12" sm="6" lg="4">
        <b-form-group
          :label="$t('pageTransfer.smtp.password')"
          label-for="smtp-password"
        >
          <input-password-toggle>
            <b-form-input
              id="smtp-password"
              v-model="form.password"
              type="password"
              :disabled="$store.getters['authentication/role'] === 'ReadOnly'"
            />
          </input-password-toggle>
        </b-form-group>
      </b-col>
      <b-col xs="12" sm="6" lg="4">
        <b-form-group
          :label="$t('pageTransfer.smtp.host')"
          label-for="smtp-host"
        >
          <b-form-input
            id="smtp-host"
            v-model="form.host"
            :disabled="$store.getters['authentication/role'] === 'ReadOnly'"
          />
        </b-form-group>
      </b-col>
      <b-col xs="12" sm="6" lg="4">
        <b-form-group
          :label="$t('pageTransfer.smtp.port')"
          label-for="smtp-port"
        >
          <b-form-input
            id="smtp-port"
            v-model="form.port"
            type="number"
            :disabled="$store.getters['authentication/role'] === 'ReadOnly'"
          />
        </b-form-group>
      </b-col>
      <b-col xs="4" class="d-flex justify-content-end align-items-start">
        <b-button variant="primary" @click="saveSmtp">
          {{ $t('global.action.save') }}
        </b-button>
      </b-col>
    </b-row>
    <b-row>
      <b-col>
        <b-table
          hover
          responsive="md"
          show-empty
          :fields="fields"
          :empty-text="$t('global.table.emptyMessage')"
        >
        </b-table>
      </b-col>
    </b-row>
  </page-section>
</template>

<script>
import PageSection from '@/components/_sila/Global/PageSection';
import BVToastMixin from '@/components/_sila/Mixins/BVToastMixin';
import DataFormatterMixin from '@/components/_sila/Mixins/DataFormatterMixin';
import InputPasswordToggle from '@/components/_sila/Global/InputPasswordToggle';

export default {
  name: 'WarningSmnp',
  components: {
    PageSection,
    InputPasswordToggle,
  },
  mixins: [BVToastMixin, DataFormatterMixin],

  data() {
    return {
      form: {
        user: '',
        password: '',
        host: '',
        port: '',
      },
      fields: [
        {
          key: 'name',
          label: this.$t('pageTransfer.table.userName'),
          formatter: this.dataFormatter,
        },
        {
          key: 'value',
          label: this.$t('pageTransfer.table.value'),
          formatter: this.dataFormatter,
          tdClass: 'text-nowrap',
        },
      ],
    };
  },
  methods: {
    saveSmtp() {
      this.$store
        .dispatch('smtpStore/setSmtpSettings', this.form)
        .then((message) => this.successToast(message))
        .catch(({ message }) => this.errorToast(message));
    },
    sendMail() {
      this.$store
        .dispatch('smtpStore/sendTestMessage')
        .then((message) => this.successToast(message))
        .catch(({ message }) => this.errorToast(message));
    },
  },
};
</script>
