<template>
	<div class="project-import">

		<div class="project-import__subtitle">
			Export project
		</div>

		Hier exporteren we naar een json template. <br>

		<div class="project-import__switches">
			<div v-for="(options, index) in exportOptions" :key="index">
				
				<w-switch
					v-for="option in options" :key="option.id"
					v-model="option.enabled"
					class="project-import__switches-switch"
				>
					{{ option.text }}
					<w-tooltip right>
						<template #activator="{ on }">
							<w-icon 
								class="right project-import__switch-icon"
								v-on="on" 
							>
								mdi mdi-information-outline
							</w-icon>
						</template>
						{{ option.description || '...' }}
					</w-tooltip>
				</w-switch>
			</div>
		</div>

		<w-button
			outline
			color="warning"
			@click="exportProject()"
		>
			Export as JSON
			<w-icon class="right">
				mdi mdi-database-export
			</w-icon>
		</w-button>

		<w-divider />
		<div class="project-import__subtitle">
			Import project
		</div>
		<article class="mb3">
			Hier kunnen we importeren van json.
		</article>
		<w-flex>
			<w-button 
				class="mr3" color="warning" 
				outline
				@click="importProject('JSON')"
			>
				Import JSON
				<w-icon class="right">
					mdi mdi-database-import
				</w-icon>
			</w-button>
			<w-button color="success" outline>
				Import CSV
				<w-icon class="right">
					mdi mdi-database-import
				</w-icon>
			</w-button>
		</w-flex>

		<w-divider />
		<div class="project-import__subtitle">
			Export tasks to CSV
		</div>

		Hier exportern we naar csv.

		<w-flex class="mt2">
			<w-select 
				v-model="delimiter"
				class="mr2"
				:items="delimiters"
			/>

			<w-button
				outline
				color="success"
				@click="exportTasks"
			>
				Export tasks as CSV
				<w-icon class="right">
					mdi mdi-database-export
				</w-icon>
			</w-button>
		</w-flex>
	</div>
</template>

<script lang="ts">
import Vue from "vue";
import exportTasks from "~/assets/query/project/exportTasks.gql";
import exportProject from "~/assets/query/project/exportProject.gql";
import { downloadText, selectFileFromExplorer } from "~/src/helpers";

type exportExtensionOptions = 'JSON' | 'CSV';

export default Vue.extend({
	
	props: {
		project: Object
	},

	data: () => ({

		delimiter: 'SEMICOLON',
		delimiters: [
			{ label: 'Semicolumn seperated', value: 'SEMICOLON' },
			{ label: 'Komma seperated', value: 'COMMA' }
		],

		exportOptions: [
			[
				{
					id: 'tasks',
					text: 'Tasks',
					description: '',
					enabled: false
				},
				{
					id: 'readme',
					text: 'Readme',
					description: '',
					enabled: false
				},
				{
					id: 'lists',
					text: 'Lists',
					description: '',
					enabled: false
				},
				{
					id: 'settings',
					text: 'Settings',
					description: '',
					enabled: false
				},
			],
			[
				{
					id: 'components',
					text: 'Components',
					description: '',
					enabled: false
				},
				{
					id: 'labels',
					text: 'Labels',
					description: '',
					enabled: false
				},
				{
					id: 'automation_rules',
					text: 'Automation Rules',
					description: '',
					enabled: false
				}
			]
		]
	}),

	computed: {
		selectedExportOptions(): string[] {
			return this.exportOptions
				.flat(Infinity)
				.filter((option: any) => option.enabled)
				.map((option: any) => option.id.toUpperCase());
		}
	},

	methods: {

		async exportProject() {
			const json = await this.$api.query(exportProject, {
				projectId: this.project.id,
				options: this.selectedExportOptions
			});

			downloadText(json.exportProject, `export-${this.project.slug}.json`);
		},

		// Export tasks to a csv file
		async exportTasks() {
			const csv = await this.$api.query(exportTasks, {
				projectId: this.project.id, 
				delimiter: this.delimiter
			});

			downloadText(csv.exportTasks, `export-tasks-${this.project.slug}.csv`);
		},

		async importProject(extension: exportExtensionOptions) {
			const filter = `.${extension.toLowerCase()}`;

			selectFileFromExplorer(filter, (file: File) => {
				
				// reading out the contents
				file.text().then((content: string) => {

					const importContents = JSON.parse(content);

					// notify user if the selected file is invalid.
					if(Object.values(importContents).length <= 1) {
						
						this.$waveui.notify({
							message: 'Invalid import file...',
							error: true
						});

						return;
					}

					// send the imported / parsed data to the server to handle the import

					
				});
			});
		}
	}
});

</script>

<style lang="scss" scoped>
.project-import {
	
	&__subtitle {
		@include font-weight(semibold);

		&:not(:first-child) {
			@include margin(4, t);
			@include margin(1, b);
		}
	}

	&__switches {
		@include margin(6, y);

		display: grid;
		grid-auto-flow: column;
		grid-auto-columns: 1fr;

		> div {
			display: flex;
			flex-direction: column;
			gap: 1rem;
		}

		&-icon {
			@include margin(-1, t);
		}
	}

}
</style>