<script lang="ts" setup>
import type { ToolbarConfig, ToolbarConfigOption, ToolbarOption } from '../richTextTypes'
import { Btn, Dropdown } from '@bagelink/vue'
import { basicToolbarConfig, toolbarOptions } from '../config'
import GridBox from './gridBox.vue'

const { config = basicToolbarConfig, selectedStyles } = defineProps<{
	config?: ToolbarConfig
	selectedStyles: Set<string>
}>()
const emit = defineEmits(['action'])

const configToOption = (action: ToolbarConfigOption) => toolbarOptions.find(option => option.name === action) as ToolbarOption

function runAction(name: ToolbarConfigOption, value?: string) {
	emit('action', name, value)
}
</script>

<template>
	<div class="toolbar flex gap-025 pb-05 flex-wrap" role="toolbar">
		<template v-for="(action, index) in config.map(configToOption).filter(Boolean)" :key="index">
			<Dropdown v-if="action.name === 'insertTable'" placement="bottom-start" thin flat icon="table">
				<template #default="{ hide }">
					<GridBox
						:gridSize="5" @select="(value) => {
							runAction('insertTable', value);
							hide();
						}"
					/>
				</template>
			</Dropdown>
			<Btn
				v-else-if="action.name !== 'separator'" v-tooltip="action.label" :icon="action.icon" thin flat
				:aria-label="action.name" :class="[action.class, { active: selectedStyles.has(action.name) }]"
				class=""
				tabindex="-1"
				@click="runAction(action.name)"
			/>
			<span v-else-if="action.name === 'separator'" :key="`separator-${index}`" class="opacity-2 mb-025">|</span>
		</template>
	</div>
</template>

<style scoped>
.toolbar :deep(.active) {
	background: var(--bgl-primary);
	color: white;
}
</style>

<style scoped></style>
