<template>
	<section class="admin-users">
		<table class="admin-users__user-table container">
			<tr class="admin-users__user-table--header">
				<th style="text-align: left; width: 0">
					ID
				</th>
				<th style="text-align: left; width: 0">
					Username
				</th>
				<th style="text-align: left">
					Email
				</th>
				<th style="text-align: center; width: 0; white-space: nowrap;">
					Creation Date
				</th>
				<th style="text-align: center; width: 0; white-space: nowrap;" />
			</tr>

			<tr
				v-for="user in users"
				:key="user.id"
			>
				<td>
					{{ user.id }}
				</td>
				<td>
					{{ user.username }}
				</td>
				<td>
					{{ user.email }}
				</td>
				<td class="admin-users__user-table--join__date">
					{{ joinDate(user) }}
				</td>
				<td>
					<w-button
						bg-color="transparent"
						color="primary"
						style="font-size: 1rem; line-height: 1.5rem;"
						@click="$router.push(`/admin/users/${user.id}/edit`)"
					>
						Edit	
					</w-button>
				</td>
			</tr>
			<tr style="text-align: center">
				<td />
				<td />
				<td>
					<w-button
						color="white"
						bg-color="primary"
						@click="createUserDialog = true"
					>
						<w-icon style="padding-right: 5px">
							mdi mdi-plus
						</w-icon>

						Create New User
					</w-button>
				</td>
			</tr>
		</table>

		<w-dialog
			v-model="createUserDialog"
			dialog-class="simple-dialog"
			width="600"
		>
			<div>
				<VindiTitle
					icon="mdi mdi-account-plus"
					style="padding-bottom: 20px"
				>
					Create New User
				</VindiTitle>
				<w-input
					v-model="newUserEmail"
					style="padding-bottom: 20px"
					:placeholder="$t('GENERAL_EMAIL')"
					autocomplete="sign-up email"
					name="email"
				/>
				<w-input
					v-model="newUserFullName"
					style="padding-bottom: 20px"
					:placeholder="$t('GENERAL_FULL_NAME')"
					autocomplete="sign-up name"
					name="name"
				/>
				<w-input
					v-model="newUserPassword"
					:placeholder="$t('SIGNIN_PASSWORD')"
					autocomplete="sign-up password"
					password-reveal
					type="password"
					name="password"
				/>
			</div>
			<VindiSpacer />
			<w-button
				round
				color="white"
				bg-color="primary"
				type="submit"
				width="100%"
				height="32"
				:loading="isLoading"
				@click="registerUser"
			>
				Create
			</w-button>
		</w-dialog>
	</section>
</template>

<script lang="ts">
import Vue from 'vue';
import dayjs from 'dayjs';
import AdminListUsers from '~/assets/query/admin/adminListUsers.gql';
import AdminCreateUser from '~/assets/query/admin/adminCreateUser.gql';

export default Vue.extend({
	name: 'AdminUsersPage',
	middleware: "admin",
	
	data: () => ({
		users: [] as any[],
		createUserDialog: false,
		isLoading: false,
		newUserEmail: '',
		newUserFullName: '',
		newUserPassword: ''
	}),

	async created() {
		// assign active / anon users
		this.users = (await this.$api.query(AdminListUsers)).allUsers;
	},

	methods: {
		joinDate(user: any): string {
			return dayjs(parseInt(user.createdAt)).format(this.$t("DATE_TIME_FORMAT") as string);
		},

		async registerUser() {
			if (!this.newUserFullName || !this.newUserEmail || !this.newUserPassword) {
				this.$waveui.notify(this.$t('NOTIFICATION_BLANK_FIELDS'), "error");
				return;
			}
			
			this.isLoading = true;

			const res = await this.$api.query(AdminCreateUser, {
				details: {
					fullname: this.newUserFullName,
					email: this.newUserEmail,
					password: this.newUserPassword,
					remember: false
				},
				verify: false,
			});

			const user = res.createUser;
			
			if (!user) {
				this.$waveui.notify(this.$t('NOTIFICATION_INVALID_DETAILS'), 'error');
			} else {
				this.$waveui.notify({
					message: 'User creation successful', 
					success: true,
				});

				this.$router.push(`/admin/users/${user.id}/edit`);
			}

			this.isLoading = false;
			this.createUserDialog = false;
		}
	}
});
</script>

<style lang="scss">
.admin-users {
	&__user-table {
		@include shadow;
		@include padding(4);
		@include padding(2, b);
		@include padding(0, t);
		@include rounded('2xl');
		@include margin(8, t);

		width: 100%;
		overflow: hidden;
		position: relative;
		border-collapse: collapse;
		background: var(--color-shade-0);;

		&--header {
			background-color: var(--color-shade-2);
		}

		&--join__date {
			text-align: center;
			white-space: nowrap;
		}

		th, td {
			@include padding(4, x);

			height: 50px;
		}

		td {
			@include padding(3, y);
		}
	}
}
</style>