Vue.component("User", {
    template: `
      <div>
        <tt-card>
          <tt-table :data="window['TT_CONFIG']['USERS']" :config="UserTableConfig">
            <template v-slot:top-buttons v-if="canManageUsers">
              <tt-button @click="window.location = window['TT_CONFIG']['ADD_URL']"
                         additional-class="btn-primary"
                         text="Benutzer hinzufügen"
                         icon="fas fa-plus"/>
            </template>

            <template v-slot:actions="{ row: user }" v-if="canManageUsers">
              <div class="d-flex justify-content-center" style="gap: 4px">
                <tt-button @click="window.location = window['TT_CONFIG']['EDIT_URL'] + '?id=' + user.id"
                           additional-class="btn-outline-primary"
                           sm
                           icon="far fa-edit"
                           title="Bearbeiten"/>
                <tt-button @click="openSendMailModal(user)"
                           additional-class="btn-outline-info"
                           sm
                           title="Login E-Mail senden"
                           icon="far fa-envelope"/>
                <tt-button @click="window.location = window['TT_CONFIG']['IMPERSONATE_URL'] + '?username=' + user.username"
                           additional-class="btn-outline-secondary"
                           sm
                           title="Impersonate"
                           icon="far fa-user-secret"/>
              </div>
            </template>

          </tt-table>
        </tt-card>
        <tt-modal disable-min-height
                  :show.sync="showSendMailModal"
                  v-if="selectedUserForMail"
                  :title="'Login E-Mail an ' + selectedUserForMail.name + ' senden?'"
                  @submit="sendLoginEmail"
                  :save-loading="isSendingMail"
                  save-text="Senden"
                  :delete="false">
          <p>Sind Sie sicher, dass Sie die Login-Informationen an <strong>{{ selectedUserForMail.email }}</strong> senden möchten?</p>
        </tt-modal>
      </div>
    `,
    data: () => ({
        window: window,
        showSendMailModal: false,
        selectedUserForMail: null,
        isSendingMail: false,
    }),
    computed: {
        canManageUsers() {
            return window['TT_CONFIG']['CAN_MANAGE_USERS'] === true;
        },
        UserTableConfig() {
            const headers = [
                {text: "Username", key: "username", class: "text-center", sortable: false, priority: 20},
                {text: "Name", key: "name", class: "text-center", sortable: false, priority: 18},
                {text: "Firma", key: "address", class: "text-center", priority: 19},
                {text: "E-Mail", key: "email", priority: 14},
                {text: "Tel. Nr.", key: "mobile", priority: 17, filter: false, sortable: false},
                {
                    text: "2FA", key: "twofactor", class: "text-center", priority: 16, filter: 'iconSelect', sortable: false,
                    filterOptions: [{value: "N/A", text: "N/A", icon: "fa fa-exclamation-triangle text-danger"},
                        {value: "Mail", text: "Mail", icon: "fa-light fa-envelope text-primary"},
                        {value: "SMS", text: "SMS", icon: "fa-light fa-mobile-retro text-info"}]
                },
                {
                    text: "Admin", key: "isAdmin", class: "text-center", priority: 13, filter: 'iconSelect', sortable: false,
                    filterOptions: [{value: true, text: "Ist Admin", icon: "fa-regular fa-circle-check text-success"},
                        {value: false, text: "Ist kein Admin", icon: "fa-regular fa-circle-xmark text-danger"}]
                },
                {
                    text: "Techniker", key: "isTechnician", class: "text-center", priority: 12, filter: 'iconSelect', sortable: false,
                    filterOptions: [{value: true, text: "Ist Techniker", icon: "fa-regular fa-circle-check text-success"},
                        {value: false, text: "Ist kein Techniker", icon: "fa-regular fa-circle-xmark text-danger"}],
                },
                {
                    text: "Aktiv", key: "isActive", class: "text-center", priority: 12, filter: 'iconSelect', sortable: false,
                    filterOptions: [{value: "1", text: "Ist Aktiv", icon: "fa-regular fa-circle-check text-success"},
                        {value: "0", text: "Ist nicht aktiv", icon: "fa-regular fa-circle-xmark text-danger"}],
                },
            ];
            if (this.canManageUsers) {
                headers.push({text: "Aktionen", key: "actions", class: "text-center", sortable: false, priority: 21, filter: false});
            }
            return {
                key: "UserTable",
                tableHeader: "Benutzer",
                defaultPageSize: 25,
                headers: headers
            };
        }
    },
    methods: {
        openSendMailModal(user) {
            this.selectedUserForMail = user;
            this.showSendMailModal = true;
        },
        async sendLoginEmail() {
            if (!this.selectedUserForMail) return;
            this.isSendingMail = true;
            try {
                const response = await axios.get(window.TT_CONFIG.SEND_LOGIN_EMAIL_URL + '?id=' + this.selectedUserForMail.id);
                if (response.data.success) {
                    window.notify('success', response.data.message);
                } else {
                    window.notify('error', response.data.message || 'E-Mail konnte nicht gesendet werden.');
                }
            } catch (error) {
                window.notify('error', 'Ein Fehler ist aufgetreten.');
                console.error(error);
            }
            this.isSendingMail = false;
            this.showSendMailModal = false;
            this.selectedUserForMail = null;
        }
    }
});