<template>
    <modal :modal-id="userAndRoles.users.addUserModalId"
           size="large"
           v-model="showModal"
           :title="modalTitle"
           :preloader="preloader"
           :modal-scroll="false"
           @submit="submit"
           @close-modal="closeModal">
        <template slot="body">
            <app-overlay-loader v-if="preloader"/>
            <form ref="form"
                  v-if="isMailSettingExist"
                  :data-url="USER_CREATE"
                  :class="{'loading-opacity': preloader}">
                <div class="form-group row align-items-center">
                    <label for="userFirstName" class="col-sm-3 mb-0">
                        {{ $t('first_name') }}
                    </label>
                    <app-input id="userFirstName"
                               class="col-sm-9"
                               type="text"
                               v-model="user.first_name"
                               :placeholder="$t('enter_first_name')"
                               :error-message="$errorMessage(errors, 'first_name')"
                               :required="true"/>
                </div>
                <div class="form-group row align-items-center">
                    <label for="userLastName" class="col-sm-3 mb-0">
                        {{ $t('last_name') }}
                    </label>
                    <app-input id="userLastName"
                               class="col-sm-9"
                               type="text"
                               v-model="user.last_name"
                               :placeholder="$t('enter_last_name')"
                               :error-message="$errorMessage(errors, 'last_name')"
                               :required="true"/>
                </div>
                <div class="form-group row align-items-center">
                    <label for="userEmail" class="col-sm-3 mb-0">
                        {{ $t('email') }}
                    </label>
                    <app-input id="userEmail"
                               class="col-sm-9"
                               type="email"
                               v-model="user.email"
                               :placeholder="$t('enter_user_email')"
                               :error-message="$errorMessage(errors, 'email')"
                               :required="true"/>
                </div>
                <div class="form-group row align-items-center">
                    <label for="roles" class="col-sm-3 mb-0">
                        {{ $t('role') }}
                    </label>
                    <app-input id="roles"
                               class="col-sm-9"
                               type="multi-select"
                               :list="roleLists"
                               list-value-field="name"
                               :isAnimatedDropdown="true"
                               v-model="roles"
                               :required="true"
                               :error-message="$errorMessage(errors, 'roles')"
                    />
                </div>
            </form>
            <app-note v-else
                      :title="$t('no_delivery_settings_found')"
                      :notes="
                  `<ol><li>${$t('no_delivery_settings_warning', {
                      location: `<a href='${urlGenerator(EMAIL_SETUP_SETTING)}'>${$t('here')}</a>`
                  })}</li>
                  </ol>`"
                      content-type="html"
            />
            <template v-if="!isMailSettingExist && !selectedUrl" slot="footer">
                <button type="button"
                        class="btn btn-secondary"
                        data-dismiss="modal">
                    {{ $t('close') }}
                </button>
            </template>
        </template>
    </modal>
</template>

<script>
import {ModalMixin} from '../../../../mixins/ModalMixin';
import {UserAndRoleMixin} from '../Mixins/UserAndRoleMixin';
import * as actions from '../../../../config/ApiUrl';
import {EMAIL_SETUP_SETTING, MAIL_CHECK_URL, USER_CREATE} from "../../../../config/ApiUrl";
import {axiosGet} from "../../../../helpers/AxiosHelper";
import FormHelperMixins from "../../../../mixins/global/FormHelperMixins";
export default {
    name: "AddUserModal",
    mixins: [FormHelperMixins, ModalMixin, UserAndRoleMixin],
    data() {
        return {
            EMAIL_SETUP_SETTING,
            USER_CREATE,
            isMailSettingExist: true,
            user: {},
            roles: [],
            roleLists: [],
            modalTitle: this.$t('add_new_user'),
        }
    },
    created() {
        this.checkMailSettings();
        this.getRoles();
    },
    methods: {
        submit() {
            this.user.roles = this.roles;
            this.save(this.user);
        },
        afterError(response) {
            this.message = '';
            this.loading = false;
            this.errors = response.data.errors || {};
            if (response.status != 422)
                this.$toastr.e(response.data.message || response.statusText)
        },
        afterSuccess(res) {
            this.$toastr.s(res.data.message);
            this.closeModal();
            this.reLoadTable();
        },
        getRoles() {
            let url = actions.ROLES;
            this.preloader = true;
            this.axiosGet(url).then(response => {
                this.roleLists = response.data.data;
            }).catch(({response}) => {
            }).finally(() => {
                this.preloader = false;
            });
        },
        checkMailSettings() {
            this.preloader = true;
            axiosGet(MAIL_CHECK_URL).then(response => {
                this.isMailSettingExist = !!response.data;
            }).finally(() => {
                this.preloader = false;
            });
        },
    }
}
</script>