<template>
  <page-section :section-title="$t('pageTransfer.smtp.smtpTitle')">
    <b-row class="smtp-warning mb-5">
      <b-col xs="12" sm="12">
        <div class="switch-group">
          <label for="authenticationSwitch">{{
            $t('pageTransfer.smtp.authorization')
          }}</label>
          <b-form-checkbox
            id="authenticationSwitch"
            v-model="form.auth"
            data-test-id="checkbox-authorization"
            switch
            :disabled="isNotAdmin"
          >
            <span v-if="form.auth">
              {{ $t('global.status.enabled') }}
            </span>
            <span v-else>{{ $t('global.status.disabled') }}</span>
          </b-form-checkbox>
        </div>
      </b-col>
      <b-col xs="12" sm="12">
        <b-form-group
          :label="$t('pageTransfer.smtp.username')"
          label-for="smtp-name"
        >
          <b-form-input
            id="smtp-name"
            v-model="form.user"
            :disabled="isNotAdmin"
          /> </b-form-group
      ></b-col>
      <b-col xs="12" sm="12">
        <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="isNotAdmin"
            />
          </input-password-toggle>
        </b-form-group>
      </b-col>
      <b-col xs="12" sm="12">
        <b-form-group
          :label="$t('pageTransfer.smtp.host')"
          label-for="smtp-host"
        >
          <b-form-input
            id="smtp-host"
            v-model="form.host"
            :disabled="isNotAdmin"
          />
        </b-form-group>
      </b-col>
      <b-col xs="12" sm="12">
        <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="isNotAdmin"
          />
        </b-form-group>
      </b-col>
      <b-col xs="12" sm="12">
        <div class="switch-group">
          <label for="sslSwitch">{{
            $t('pageTransfer.smtp.sslEnabled')
          }}</label>
          <b-form-checkbox
            id="sslSwitch"
            v-model="form.ssl"
            data-test-id="checkbox-ssl"
            switch
            :disabled="isNotAdmin"
          >
            <span v-if="form.ssl">
              {{ $t('global.status.enabled') }}
            </span>
            <span v-else>{{ $t('global.status.disabled') }}</span>
          </b-form-checkbox>
        </div>
      </b-col>
      <b-col xs="4" class="d-flex justify-content-between align-items-start">
        <b-button variant="secondary" :disabled="isNotAdmin" @click="sendMail">
          {{ $t('pageTransfer.smtp.testMessage') }}
        </b-button>

        <b-button variant="primary" :disabled="isNotAdmin" @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: '',
        auth: null,
        ssl: null,
      },
      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',
        },
      ],
    };
  },
  computed: {
    isNotAdmin() {
      return (
        this.$store.getters['authentication/role'] === 'ReadOnly' ||
        this.$store.getters['authentication/role'] === 'Operator'
      );
    },
  },
  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', {
          from: 'ex@mail.ru',
          to: 'v.lysak@dunice.net',
          subject: 'qwerty',
          text: 'lol',
        })
        .then((message) => this.successToast(message))
        .catch(({ message }) => this.errorToast(message));
    },
  },
};
</script>

<style lang="scss" scoped>
.switch-group {
  margin-bottom: 1.5rem;
}
.smtp-warning {
  width: 50%;
  @media (max-width: 1200px) {
    width: 75%;
  }
  @media (max-width: 576px) {
    width: 100%;
  }
}
</style>
