<template>
	<section class="members-tab">
		<SearchBar
			:active="!!suggestions.length"
			placeholder="Search people to invite..."
			@input="searchMembers"
		>
			<div
				v-for="profile in suggestions"
				:key="profile.id"
				@click="inviteMember(profile.id)"
			>
				<profile-bit
					:profile="profile"
					:open-profile="false"
				/>
			</div>
		</SearchBar>

		<div
			v-if="invites.length"
			class="members-tab__pending"
		>
			<div class="members-tab__subtitle">
				Sent invitations ({{ invites.length }})
			</div>
			<table class="user-table">
				<tr>
					<th>
						Profile
					</th>
					<th>
						Invitation sent
					</th>
					<th />
				</tr>
				<tr v-for="{ member, joinedAt } in invites" :key="member.id">
					<td>
						<profile-bit :profile="member" />
					</td>
					<td>
						{{ formatDate(joinedAt) }}
					</td>
					<td>
						<w-button
							lg
							icon="mdi mdi-delete"
							color="red-500"
							@click="removeMember(member.id)"
						/>
					</td>
				</tr>
			</table>
		</div>
		<div class="members-tab__members">
			<div class="members-tab__subtitle">
				Project members ({{ members.length }})
			</div>
			<table class="user-table">
				<tr>
					<th>
						Profile
					</th>
					<th>
						Access granted
					</th>
					<th>
						Access level
					</th>
					<th />
				</tr>
				<tr v-for="{ member, joinedAt, accessLevel } in members" :key="member.id">
					<td>
						<ProfileBit :profile="member" />
					</td>
					<td>
						{{ formatDate(joinedAt) }}
					</td>
					<td>
						{{ accessLevel }}
					</td>
					<td>
						<!-- TODO Make disabled state more accurate -->
						<w-button
							lg
							icon="mdi mdi-delete"
							color="error"
							:disabled="member.id == $store.state.profile.id"
							@click="removeMember(member.id)"
						/>
					</td>
				</tr>
			</table>
		</div>
	</section>
</template>

<script lang="ts">
import dayjs from 'dayjs';
import gql from 'graphql-tag';
import { cloneDeep } from 'lodash';
import { parseSlug } from '~/src/helpers';
import onMembersChange from '~/assets/query/project/onMembersChange.gql';
import fetchMemberSearch from '~/assets/query/project/fetchMemberSearch.gql';
import Vue from 'vue';

export default Vue.extend({
	name: 'MembersTab',

	props: {
		project: Object
	},

	data: () => ({
		manager: null as any,
		members: [],
		invites: [],
		suggestions: [],
		search: '',
		isSearching: false
	}),

	created() {
		this.members = cloneDeep(this.project.members);
		this.invites = cloneDeep(this.project.invites);
	},

	mounted() {
		this.manager = this.$api.createManager();

		const slug = parseSlug(this.$route.params.pid);

		// Update members list
		this.manager.subscribe({
			query: onMembersChange,
			variables: {
				id: slug
			},
			next: (result: any) => {
				const res = result.projectUpdated;

				this.members = res.members;
				this.invites = res.invites;
			}
		});
	},

	destroyed() {
		this.manager?.dispose();
	},

	methods: {
		
		formatDate(joinedAt: string): string {
			return dayjs(parseInt(joinedAt)).fromNow();
		},

		inviteMember(id: number) {
			this.$api.query(gql`
				mutation ($pid: Int!, $uid: Int!) {
					inviteProjectMember(id: $pid, userId: $uid) {
						joinedAt
					}
				}
			`, {
				pid: this.project.id,
				uid: id
			});
		},

		removeMember(id: number) {
			this.$api.query(gql`
				mutation ($pid: Int!, $uid: Int!) {
					removeProjectMember(id: $pid, userId: $uid) {
						joinedAt
					}
				}
			`, {
				pid: this.project.id,
				uid: id
			});
		},

		async searchMembers(query: string) {
			const res = await this.$api.query(fetchMemberSearch, {
				query: query
			});

			this.suggestions = res.search.users;
		}
		
	}
});
</script>

<style lang="scss">
.members-tab {
	.member-list:not(:last-child) {
		@include padding(6, b);
	}

	&__pending {
		@include padding(8, b);
	}

	&__subtitle {
		@include font-weight(semibold);
	}

	.user-table {
		@include margin(2, t);

		width: 100%;
		text-align: left;

		th {
			@include font-size(sm);
			@include font-weight(semibold);

			color: #737373;
		}

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

			white-space: nowrap;
		}

		tr:not(:last-child) {
			th, td {
				border-bottom: 1px solid var(--color-shade-3);
			}
		}

		th:first-child {
			width: 100%;
		}
	}
}
</style>