<template>
    <section class="max-w-xl m-auto flex flex-col h-screen">
        <van-nav-bar :title="t('language.title')" :border="false">
            <template #left>
                <SvgIcon name="allow-left" class="w-7 h-7" @click="router.back" />
            </template>
        </van-nav-bar>
        <div class="h-36 w-full flex items-center justify-center bg-white">
            <img :src="profile.avatar" class="h-12 w-12" />
        </div>
        <div class=" bg-[#F4F6F7FF] flex-grow pt-8">
            <div class="bg-white flex flex-row items-center 
            justify-between mx-3 p-4 rounded-lg">
                <span class="text-[#757575]">{{ t('language.u') }}</span>
                <span class="text-[#1C1C1E] font-semibold">{{ profile.username }}</span>
            </div>
            <div class="mx-3 pt-4">
                <span class="text-[#9CADBF]">{{ t('language.c_l') }}</span>
            </div>
            <div class="bg-white flex flex-row items-center 
            justify-between mx-3 mt-4  p-4 rounded-lg" @click="showPicker = true">
                <span class="text-[#757575]">{{ t('language.l') }}</span>
                <div class="flex flex-row items-center justify-center">
                    <span class="text-[#1C1C1E] font-semibold">{{ selectValue.text }}</span>
                    <SvgIcon name="settings-arrow" class="h-6 w-6 text-md" />
                </div>
            </div>
            <van-popup v-model:show="showPicker" round position="bottom" 
            :confirm-button-text="t('common.confirm')" :cancel-button-text="t('common.cancel')">
                <van-picker :columns="columns" @cancel="showPicker = false" @confirm="onConfirm" 
                :confirm-button-text="t('common.confirm')" :cancel-button-text="t('common.cancel')"/>
            </van-popup>
        </div>
    </section>
</template>

<script setup lang="ts">
import SvgIcon from '@/components/SvgIcon.vue';
import { useRouter } from "vue-router";
import { ref } from 'vue'
import { setLang } from '@/i18n';
import { useI18n } from 'vue-i18n';
const { t } = useI18n()

const columns = [
    { text: 'English', value: 'en-us' },
    { text: 'Dansk', value: 'da-dk' },
    { text: 'Português', value: 'pt-pt' },
    { text: 'Deutsch', value: 'dn-de' },
    { text: 'Arabic', value: 'st-st' },
];
const defaultLang = import.meta.env.VITE_DEFAULT_LANG
const currentLang = localStorage.getItem('lang') || defaultLang
const langObj = columns.filter(item => item.value === currentLang)[0]
const selectValue = ref({ text: langObj.text, value: langObj.value })

const profile = JSON.parse(localStorage.getItem('profile') || "{}")
const router = useRouter()
const showPicker = ref(false)


const onConfirm = ({ selectedOptions }) => {
    showPicker.value = false;
    selectValue.value = selectedOptions[0];
    localStorage.setItem('lang', selectValue.value.value)
    setLang(selectValue.value.value)
};

</script>