<script setup lang="ts">
import { computed, ref } from 'vue'

const props = defineProps<{
	gridSize?: number
}>()
const emit = defineEmits(['select'])
const fb = 1
const base = props.gridSize || 5
const hoveredRow = ref(fb)
const hoveredCol = ref(fb)

const rowSize = computed(() => {
	const enlarge = Math.min(hoveredRow.value + 1, 20)
	return hoveredRow.value > (base - 1) ? enlarge : base
})
const colSize = computed(() => {
	const enlarge = Math.min(hoveredCol.value + 1, 20)
	return hoveredCol.value > (base - 1) ? enlarge : base
})
</script>

<template>
	<div class="grid grid-wrap p-05">
		<div
			v-for="row in rowSize" :key="`row-${row}`" class="flex" @mouseout="hoveredRow = fb; hoveredCol = fb"
			@focusout="hoveredRow = fb; hoveredCol = fb"
		>
			<div
				v-for="col in colSize" :key="`col-${col}`" role="button" tabindex="0" aria-label="Insert Table"
				:style="{ width: '20px', height: '20px' }" class="flex pointer gap-025 tableBoxSelect"
				:class="{ borderSelect: hoveredRow >= row && hoveredCol >= col }"
				@mousemove="hoveredRow = row; hoveredCol = col" @click="emit('select', `${row}x${col}`)"
			/>
		</div>
		<p class="txt-center txt-12 color-gray">
			{{ hoveredRow }}x{{ hoveredCol }}
		</p>
	</div>
</template>

<style scoped>
.tableBoxSelect::after {
	content: '';
	display: block;
	width: calc(100% - 4px);
	height:	calc(100% - 4px);
	border: 1px solid var(--bgl-gray);
	background: var(--bgl-gray-light);

}
.borderSelect::after {
	border-color: var(--bgl-primary-tint);
	background: var(--bgl-primary-light);
}
</style>
