<script setup lang="ts">
import type { IconType } from '@bagelink/vue'
import { FONT_AWESOME_ICONS, MATERIAL_ICONS, FONT_AWESOME_BRANDS_ICONS } from './constants'

const props = withDefaults(defineProps<{
	icon?: IconType
	name?: IconType
	size?: number | string
	color?: string
	round?: boolean
	weight?: number | string
	fontAwesome?: boolean
	fill?: boolean
}>(), {
	size: 1
})

const iconRender = $computed(() => props.icon || props.name) as IconType

const iconRenderType = $computed(() => {
	if (props.fontAwesome && (FONT_AWESOME_ICONS.includes(iconRender) || FONT_AWESOME_BRANDS_ICONS.includes(iconRender))) return 'font-awesome'
	if (MATERIAL_ICONS.includes(iconRender)) return 'material'
	if (FONT_AWESOME_ICONS.includes(iconRender) || FONT_AWESOME_BRANDS_ICONS.includes(iconRender)) return 'font-awesome'
	return 'material'
})

const isFaBrand = $computed(() => FONT_AWESOME_BRANDS_ICONS.includes(iconRender))
</script>

<template>
	<span
		v-if="iconRenderType === 'material'"
		class="bgl_icon-font"
		:class="{ 'round flex aspect-ratio-1 justify-content-center': round }"
		:style="{ 'fontSize': `${size}rem`,
			color,
			'font-variation-settings': `'FILL' ${fill ? 1 : 0}, 'wght' ${weight || 400}`,
			'width': round ? `calc(${size}rem * 2)` : 'auto',
			'height': round ? `calc(${size}rem * 2)` : 'auto',
		}"
	>
		{{ iconRender }}
	</span>
	<span
		v-else-if="iconRenderType === 'font-awesome'"
		class="fa bgl_icon-font"
		:class="[
			`fa-${iconRender}`,
			{
				'fa-brands': isFaBrand,
				'fa-solid': fill,
				'far': !fill && !isFaBrand,
			},
		]"
		:style="{ 'fontSize': `${size}rem`, color, 'font-variation-settings': `'wght' ${weight || 400}` }"
	/>
</template>

<style>
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css');
[dir='rtl'] .data-row .bgl_icon-font,
[dir='rtl'] .embedded-field .bgl_icon-font,
[dir='rtl'] .rich-text-editor .toolbar .bgl_icon-font {
	transform: rotateY(180deg) !important;
}
</style>

<style>
.bgl_icon-font {
	font-family: 'Material Symbols Outlined', serif !important;
}

.bgl_icon-font.fa {
	font-family: 'Font Awesome 6 Free', serif !important;
}

.bgl_icon-font.fa-brands {
	font-family: 'Font Awesome 6 Brands', serif !important;
}
</style>

<!-- <style src="./font-awesome.css" /> -->
