<template>
    <van-action-sheet v-model:show="show" class="sheet">
        <div class="currency-mask">
            <div class="search" v-if="showSearch">
                <van-field
                    class="form-input"
                    v-model="inputValueDoc"
                    type="text"
                    :placeholder="t('common.country')"
                    :clearable="true"
                    autocomplete="off"
                >
                    <template #left-icon><icon name="cwg-search" :size="23" color="" /> </template>
                </van-field>
            </div>
            <div class="currency-select">
                <div v-for="item in filteredOptions" :key="item.value" class="currency-item" @click="select(item)">
                    <img :src="imageSrc(item.value)" alt="" srcset="" />
                    {{ item.value }}
                    <span> {{ item.text }} </span>
                </div>
            </div>
        </div>
    </van-action-sheet>
</template>

<script setup lang="ts">
import { useI18n } from 'vue-i18n'
const {t} = useI18n()
const props = defineProps<{
    modelValue: boolean
    showSearch: boolean
    options: Array<{ text: string; value: string }>
}>()
const inputValueDoc = ref('')
const emit = defineEmits(['update:modelValue', 'select'])

const show = ref(props.modelValue)

const filteredOptions = computed(() => {
    if (!inputValueDoc.value) return props.options
    const keyword = inputValueDoc.value.toLowerCase()
    return props.options.filter((item) => item.text.toLowerCase().includes(keyword) || item.value.toLowerCase().includes(keyword))
})
const images = import.meta.glob('@/assets/images/currency/*.png', { eager: true })

const imageSrc = (currency:string) => {
  return images[`/src/assets/images/currency/${currency}.png`]?.default || fallbackImg
}

watch(
    () => props.modelValue,
    (val) => (show.value = val),
)
watch(show, (val) => emit('update:modelValue', val))

function select(item: { text: string; value: string }) {
    emit('select', item)
    show.value = false
}
</script>

<style scoped lang="scss">
:deep(.van-action-sheet){
    max-height: 80vh;

}
.currency-mask{
    padding: 24px 16px 0 16px;
}
.search {
    color: #8e8a8a;
    font-family: Roboto;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: 0.08px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    display: flex;
    padding: 12px 16px;
    align-items: center;
    gap: 82px;
    border-radius: 30px;
    border: 1px solid #beb6b6;
    :deep(.van-field) {
        padding: 0;
    }
    :deep(.van-field__left-icon) {
        display: flex;
        align-items: center;
    }
}
.currency-select {
    height: calc(80vh - 98px);
    overflow-y: auto;
    padding: 0 0 22px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 2;
}
.currency-item {
    display: flex;
    padding: 12px 16px;
    align-items: center;
    gap: 8px;
    align-self: stretch;
    border-radius: 10px;
    color: #0e0f0c;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 150% */
    letter-spacing: -0.08px;

    span {
        color: #454745;
        font-family: Inter;
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 22px; /* 157.143% */
        letter-spacing: 0.14px;
    }

    img {
        display: flex;
        width: 48px;
        height: 48px;
        justify-content: center;
        align-items: center;
        aspect-ratio: 1/1;
        border-radius: 100px;
        border: 1px solid rgba(14, 15, 12, 0.12);
        box-shadow: 0px 0px 40px 0px rgba(69, 71, 69, 0.2);
    }
}
.cancel-btn {
    width: 90vw;
    padding: 20px 0;
    text-align: center;
    color: #111;
    border-radius: 20px;
    font-weight: bold;
    font-size: 22px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
</style>
