<template>
    <div>
        <van-action-sheet v-model:show="show" :style="actionSheetStyle">
            <div class="currency-mask">
                <div class="search" v-if="showSearch && props.options.length > 10">
                    <van-field
                        class="form-input"
                        v-model="inputValueDoc"
                        type="text"
                        :placeholder="t('common.input')"
                        :clearable="true"
                        autocomplete="off"
                    >
                        <template #left-icon><icon name="cwg-search" :size="23" color="" /> </template>
                    </van-field>
                </div>
                <div class="currency-select" :style="actionSheetStyle1">
                    <template v-if="filteredOptions.length > 0">
                        <div
                            v-for="(item, index) in filteredOptions"
                            class="currency-item"
                            :class="{ selected: item.text === inputValue }"
                            @click="select(item)"
                            :key="item.value + index"
                            :ref="item.text === inputValue ? 'selectedItem' : null"
                        >
                            {{ item.text }}
                        </div>
                    </template>
                </div>
            </div>
        </van-action-sheet>
    </div>
</template>

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

const show = ref(props.modelValue)
const selectedItem = ref()
const filteredOptions = computed(() => {
    if (!inputValueDoc.value) return props.options
    const keyword = inputValueDoc.value.toLowerCase()
    return props.options.filter((item) => item.text.toLowerCase().includes(keyword))
})

watch(
    () => props.modelValue,
    (val) => (show.value = val),
)
watch(show, async (val) => {
    emit('update:modelValue', val)
    inputValueDoc.value = ''
    if (val) {
        await nextTick()
        setTimeout(() => {
            const el = Array.isArray(selectedItem.value) ? selectedItem.value[0] : selectedItem.value
            if (el && el.scrollIntoView) {
                el.scrollIntoView({ block: 'center' })
            }
        }, 300)
    }
})
const actionSheetStyle = computed(() => {
    if (props?.options.length > 10) {
        return {
            maxHeight: `80vh`,
            padding: '24px 16px 0 16px',
        }
    } else {
        const itemHeight = 56
        const baseHeight = 0
        const maxHeight = Math.min(props?.options.length * itemHeight + baseHeight, window.innerHeight * 0.8)
        return {
            maxHeight: `${maxHeight}px`,
            padding: '24px 16px 0 16px',
        }
    }
})
const actionSheetStyle1 = computed(() => {
    if (props?.options.length > 10) {
        return {
            maxHeight: `calc(80vh - 98px)`,
        }
    } else {
        const itemHeight = 56
        const baseHeight = 0
        const maxHeight = Math.min(props?.options.length * itemHeight + baseHeight, window.innerHeight * 0.8)
        return {
            maxHeight: `${maxHeight}px`,
        }
    }
})
function select(item: { text: string; value: string }) {
    emit('select', item)
    show.value = false
}
</script>

<style scoped lang="scss">
.sheet {
    :deep(.van-action-sheet) {
        min-height: 20vh;
        max-height: 80vh;
    }
}
.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;
    }
}
.payment-form .van-field {
    margin-bottom: 0 !important;
}
.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);
    }
}
.selected {
    border-radius: 10px;
    background: rgba(255, 209, 216, 0.85);
}
.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>
