<!--
  - Copyright (c) 2020-2024. The Nextcloud Bookmarks contributors.
  -
  - This file is licensed under the Affero General Public License version 3 or later. See the COPYING file.
  -->

<template>
	<NcModal v-if="show" :name="t('bookmarks', 'Select folder')" @close="onClose">
		<div class="folderpicker-dialog">
			<FolderPicker :title="t('bookmarks', 'Select folder')" @submit="onSelect" />
		</div>
	</NcModal>
</template>
<script>
import { NcModal } from '@nextcloud/vue'
import FolderPicker from './FolderPicker.vue'

export default {
	name: 'FolderPickerDialog',
	components: {
		FolderPicker,
		NcModal,
	},
	props: {
		value: {
			type: Number,
			default: -1,
		},
		show: {
			type: Boolean,
			default: true,
		},
	},
	computed: {
		allFolders() {
			return this.$store.state.folders
		},
	},
	created() {},
	methods: {
		onSelect(folderId) {
			this.$root.$emit('select', folderId)
			this.$emit('input', folderId)
			this.$emit('close')
		},
		onClose() {
			this.$root.$emit('close')
			this.$emit('close')
		},
	},
}
</script>
<style>
.folderpicker-dialog {
	min-width: 300px;
	height: 300px;
	overflow-y: scroll;
	padding: 10px;
}
</style>
