<template>
	<div class="assignee-selector">
		<div
			v-if="isLoading"
			class="assignee-selector__loading"
		>
			<w-progress
				color="primary"
				size="2.5em"
				circle
			/>
		</div>
		<template v-else>
			<w-input
				ref="filter"
				v-model="filterQuery"
				bg-color="shade-3"
				placeholder="Search member..."
				class="assignee-selector__input"
				inner-icon-left="mdi mdi-magnify"
				autocomplete="off"
				color="grey"
			/>

			<w-divider />

			<div
				v-if="!membersFiltered.length"
				class="assignee-selector__empty"
			>
				No results found!
			</div>

			<div class="assignee-selector__list">
				<div
					v-for="(member, i) in pageContents"
					:key="i"
					class="assignee-selector__profile"
					@click="toggleAssignee(member)"
				>
					<VindiProfile :profile="member" />
					<VindiSpacer />
					<w-icon
						v-show="isAssigned(member)"
						xl
					>
						mdi mdi-check
					</w-icon>
				</div>
			</div>

			<VindiPagination
				v-model="currentPage"
				:total="pageCount"
				:visible="3"
			/>
		</template>
	</div>
</template>

<script lang="ts">
import Vue from 'vue';
import memberSelector from '~/assets/query/viewer/memberSelector.gql';
import { chunk, map } from 'lodash';
import { focusInput } from '~/src/helpers';

export default Vue.extend({
	props: {
		assignees: {
			required: true,
			type: Array
		},
		projectId: {
			required: true,
			type: Number
		}
	},

	data: () => ({
		isLoading: true,
		filterQuery: '',
		currentPage: 0,
		members: [] as any[]
	}),

	computed: {
		membersFiltered(): any[] {
			const query = this.filterQuery.toLowerCase();

			return this.members.filter(member => {
				return (
					member.username.toLowerCase().includes(query) ||
					member.fullName.toLowerCase().includes(query)
				);
			});
		},
		pageCount(): number {
			return Math.ceil(this.membersFiltered.length / 5);
		},
		pageContents(): any[] {
			return chunk(this.membersFiltered, 5)[this.currentPage];
		}
	},

	mounted() {
		this.fetchProjectMembers();	
	},

	methods: {
		async fetchProjectMembers() {
			this.isLoading = true;

			const result = await this.$api.query(memberSelector, {
				projectId: this.projectId
			});

			this.members = map(result.project.members, 'member');
			// this.members = Array(7).fill(this.members[0]);
			this.isLoading = false;

			this.$nextTick(() => {
				focusInput(this.$refs.filter as any);
			});
		},

		isAssigned(member: any): boolean {
			return this.assignees.includes(member.id);
		},

		toggleAssignee(member: any) {
			if(this.assignees.includes(member.id)) {
				this.$emit('remove', member);
			} else {
				this.$emit('add', member);
			}
		}
	}
});
</script>

<style lang="scss">
.assignee-selector {
	@include padding(3);

	width: 18rem;

	&__loading {
		@include padding(3, y);

		display: flex;
		align-items: center;
		justify-content: center;
	}

	&__list {
		@include margin(4, b);
	}

	&__empty {
		@include rounded(md);
		@include padding(3);

		background-color: var(--color-shade-2);
		color: var(--color-negative-4);
		text-align: center;
	}

	&__profile {
		@include padding(1.5);
		@include padding(2.5, r);
		@include rounded(md);

		cursor: pointer;
		display: flex;
		align-items: center;

		&:hover {
			background-color: var(--color-shade-2);
		}
	}
}
</style>