<script setup lang="ts">
import { getFilename as getPattern, patterns } from '../pattern';
import { getFilename as getTopper, baseToppers, aristoToppers } from '../topper';

const globalFenceType = useGlobalFenceType()
const props = defineProps(['cb', 'patterns']);
type pType = {
    list: typeof patterns | typeof baseToppers,
    func: any
    type: string | null
}
const p = reactive({
    list: [],
    type: null,
    func: () => { }
} as pType)

if (props.patterns == 'pattern') {
    p.list = patterns;
    p.func = getPattern
} else if (props.patterns == 'topper') {
    p.list = baseToppers
    p.func = getTopper
}
watch(globalFenceType, () => {
    if (props.patterns == 'topper') {
        if (globalFenceType.value?.type == 'standart') {
            p.list = baseToppers
            p.type = 'toppers'
        }
        if (globalFenceType.value?.type == 'aristo') {
            p.list = aristoToppers
            p.type = 'aristoToppers'
        }
    }
})
</script>
<template>
    <template v-for="item in p.list">
        <NuxtImg :src="p.func(item.id)" class="picker-item" @click="props.cb(item.id)" v-if="item.filename" />
        <span class="picker-item picker-item--empty" @click="props.cb(item.id)" v-else />
    </template>
</template>