<template>
	<div>
		<!-- ANCHOR Project creation dialog -->
		<w-dialog
			v-model="newProjectDialog"
			dialog-class="simple-dialog"
			width="600"
		>
			<VindiTitle icon="mdi mdi-folder-multiple-plus">
				{{ $t("CREATE_NEW_PROJECT") }}
			</VindiTitle>

			<label v-html="$t('CREATE_NEW_PROJECT_NAME')" />
			<w-input
				v-model="newProjectName"
				v-auto-focus
			/>

			<label v-html="$t('CREATE_NEW_DESC')" />
			<w-textarea
				v-model="newProjectDesc"
				rows="3"
			/>

			<label v-html="$t('CREATE_NEW_INVITE_MEMBERS')" />

			<div class="addition-list">
				<!-- TODO Implement member addition -->
				<VindiAvatar
					v-for="i in tempMemberCount"
					:key="i"
					:profile="$store.state.profile"
					:open-profile="false"
					:size="44"
				/>
				<div
					v-if="tempMemberCount < 12"
					class="addition-list__add-btn"
					@click="tempMemberCount++"
				>
					<w-icon>
						mdi mdi-plus
					</w-icon>
				</div>
			</div>

			<w-flex class="simple-dialog__options">
				<w-button
					bg-color="shade-2"
					@click="newProjectDialog = false"
				>
					Close
				</w-button>
				<VindiSpacer />
				<w-button
					color="white"
					bg-color="primary"
					:loading="newProjectLoading"
					:disabled="!newProjectName"
					@click="createProject"
				>
					<w-icon class="left">
						mdi mdi-plus
					</w-icon>
					{{ $t("CREATE_NEW_PROJECT_CREATE") }}
				</w-button>
			</w-flex>
		</w-dialog>

		<!-- ANCHOR Team creation dialog -->
		<w-dialog
			v-model="newTeamDialog"
			dialog-class="simple-dialog"
			width="600"
		>
			<VindiTitle icon="mdi mdi-account-multiple-plus">
				{{ $t("CREATE_NEW_TEAM") }}
			</VindiTitle>

			<label v-html="$t('CREATE_NEW_TEAM_NAME')" />
			<w-input
				v-model="newTeamName"
				v-auto-focus
			/>

			<label v-html="$t('CREATE_NEW_DESC')" />
			<w-textarea
				v-model="newTeamDesc"
				rows="3"
			/>

			<label v-html="$t('CREATE_NEW_INVITE_MEMBERS')" />

			<div class="addition-list">
				<!-- TODO Implement member addition -->
				<VindiAvatar
					v-for="i in tempMemberCount"
					:key="i"
					:profile="$store.state.profile"
					:open-profile="false"
					:size="44"
				/>
				<div
					v-if="tempMemberCount < 12"
					class="addition-list__add-btn"
					@click="tempMemberCount++"
				>
					<w-icon>
						mdi mdi-plus
					</w-icon>
				</div>
			</div>

			<w-flex class="simple-dialog__options">
				<w-button
					bg-color="shade-2"
					@click="newTeamDialog = false"
				>
					Close
				</w-button>
				<VindiSpacer />
				<w-button
					color="white"
					bg-color="primary"
					:loading="newTeamLoading"
					:disabled="!newTeamName"
					@click="createTeam"
				>
					<w-icon class="left">
						mdi mdi-plus
					</w-icon>
					{{ $t("CREATE_NEW_TEAM_CREATE") }}
				</w-button>
			</w-flex>
		</w-dialog>
	</div>
</template>

<script lang="ts">
import Vue from 'vue';
import createTeam from '~/assets/query/toolbar/createTeam.gql';
import createProject from '~/assets/query/toolbar/createProject.gql';
import { CreationProvider } from '~/typings/models';

export default Vue.extend({
	
	data: () => ({
		tempMemberCount: 1,

		// Project creation
		newProjectName: "",
		newProjectDesc: "",
		newProjectLoading: false,

		// Team creation
		newTeamName: "",
		newTeamDesc: "",
		newTeamLoading: false,
	}),

	computed: {
		newProjectDialog: {
			get() {
				return this.$store.state.newProjectDialog;
			},
			set(value) {
				this.$store.commit('viewNewProjectDialog', value);
			}
		},
		newTeamDialog: {
			get() {
				return this.$store.state.newTeamDialog;
			},
			set(value) {
				this.$store.commit('viewNewTeamDialog', value);
			}
		}
	},

	watch: {
		newProjectDialog(value) {
			if(value) {
				this.newProjectName = "";
				this.newProjectDesc = "";
			}
		},
		newTeamDialog(value) {
			if(value) {
				this.newTeamName = "";
				this.newTeamDesc = "";
			}
		}
	},

	mounted() {
		this.$store.commit('addCreationProvider', {
			id: 'project',
			order: 0,
			icon: "mdi mdi-folder-open",
			title: "TOOLBAR_CREATE_PROJECT",
			description: "TOOLBAR_CREATE_PROJECT_DESC",
			handler: () => this.$store.commit('viewNewProjectDialog', true),
		} as CreationProvider);

		this.$store.commit('addCreationProvider', {
			id: 'team',
			order: 10,
			icon: "mdi mdi-account-group",
			title: "TOOLBAR_CREATE_TEAM",
			description: "TOOLBAR_CREATE_TEAM_DESC",
			handler: () => this.$store.commit('viewNewTeamDialog', true),
		} as CreationProvider);
	},

	beforeDestroy() {
		this.$store.commit('removeCreationProvider', 'project');
		this.$store.commit('removeCreationProvider', 'team');
	},

	methods: {
		async createProject() {
			this.newProjectLoading = true;

			const res = await this.$api.query(createProject, {
				data: {
					name: this.newProjectName,
					description: this.newProjectDesc,
					public: false,
				},
			});

			this.newProjectLoading = false;
			this.$store.commit('viewNewProjectDialog', false);

			await this.$router.push(res.createProject.projectUrl);

			this.$waveui.notify({
				message: this.$t("NOTIFICATION_CREATE_PROJECT", [
					this.newProjectName,
				]),
				success: true,
			});
		},

		async createTeam() {
			this.newTeamLoading = true;

			const res = await this.$api.query(createTeam, {
				data: {
					name: this.newTeamName,
					description: this.newTeamDesc,
				},
			});

			this.newTeamLoading = false;
			this.$store.commit('viewNewTeamDialog', false);

			await this.$router.push(res.createTeam.teamUrl);
			
			this.$waveui.notify({
				message: this.$t("NOTIFICATION_CREATE_TEAM", [
					this.newTeamName,
				]),
				success: true,
			});
		}
	}

});
</script>