<template>
	<Dialog
		title="Settings"
		@close="$emit('close')"
	>
		<nav class="tabs">
			<button
				class="tab"
				:class="{ selected: section === 'filters' }"
				@click="section = 'filters'"
			>Filters</button>

			<button
				class="tab"
				:class="{ selected: section === 'summary' }"
				@click="section = 'summary'"
			>Summary</button>
		</nav>

		<div class="dialog-body">
			<component :is="sections[section]" />
		</div>
	</Dialog>
</template>

<script>
import { shallowRef } from 'vue';

import Filters from './filters.vue';
import Summary from './summary.vue';

export default {
	emits: ['close'],
	data() {
		return {
			sections: {
				filters: shallowRef(Filters),
				summary: shallowRef(Summary),
			},
			section: 'filters',
		};
	},
};
</script>

<style lang="scss" scoped>
.dialog-body {
	width: 40rem;
	max-width: 100%;
}

.tabs {
	display: flex;
}

.tab {
	flex-grow: 1;
	padding: .75rem 1rem;
	background: var(--shadow-touch);
	border: none;
	border-bottom: solid 1px var(--shadow-hint);
	color: var(--shadow);
	font-size: 1rem;
	font-weight: bold;

	&:not(:first-child) {
		border-left: solid 1px var(--shadow-hint);
	}

	&.selected {
		background: none;
		color: var(--primary);
		border-bottom: none;
	}

	&:hover {
		color: var(--shadow-strong);
		cursor: pointer;
	}
}
</style>