<template>
	<section class="members-tab">
		<SearchBar
			:active="!!suggestions.length"
			placeholder="Search people to invite..."
			@input="searchMembers"
		>
			<div
				class="members-tab__results"
			>
				<div
					v-for="profile in suggestions"
					:key="profile.id"
					class="members-tab__results__child"
					@click="inviteMember(profile.id)"
				>
					<VindiProfile
						:profile="profile"
						:open-profile="false"
					/>
				</div>
			</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>
						<VindiProfile :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 in members" :key="member.member.id">
					<td>
						<VindiProfile :profile="member.member" />
					</td>
					<td>
						{{ formatDate(member.joinedAt) }}
					</td>
					<td>
						<w-select
							v-model="member.accessLevel"
							:items="projectRoles"
							:disabled="member.member.id == project.creator.id || member.member.id == $store.state.profile.id"
							@item-select="selectRole"
						/>
					</td>
					<td>
						<!-- TODO Make disabled state more accurate -->
						<w-button
							lg
							icon="mdi mdi-delete"
							color="error"
							:disabled="member.member.id == project.creator.id || member.member.id == $store.state.profile.id"
							@click="removeMember(member.member.id)"
						/>
					</td>
				</tr>
			</table>
		</div>
	</section>
</template>

<script lang="ts">
import dayjs from 'dayjs';
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 removeProjectMember from '~/assets/query/project/removeProjectMember.gql';
import inviteProjectMember from '~/assets/query/project/inviteProjectMember.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,
		projectRoles: [
			{ label: "Manager", value: 'manager' },
			{ label: "Member", value: 'member' }, 
		]
	}),

	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(inviteProjectMember, {
				pid: this.project.id,
				uid: id
			});
		},

		// TODO Implement
		selectRole(role: Object) {
			const selected = (role as [] as any).value;

			console.log(selected);
		},

		removeMember(id: number) {
			this.$api.query(removeProjectMember, {
				pid: this.project.id,
				uid: id
			});
		},

		async searchMembers(query: string) {
			if (query === '') return;

			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);
	}

	&__results {
		@include transition(shadow);
		@include rounded(xl);
		@include padding(4);
		@include shadow;

		display: flex;
		flex-direction: column;
		background-color: var(--color-shade-0);
		
		overflow: hidden;
		width: 26rem;
		gap: 0.75em;

		overflow-y: auto;
		max-height: 30rem;

		&__child {
			display: flex;
			overflow: hidden;

			width: 26rem;
			height: 2.5rem;
		}
	}

	&__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>