<script setup lang="ts">
// imports

import useUpdateAccount from "~/composables/api/account/useUpdateAccount";
import { useToast } from "~/composables/global/useToast";

// types

type Props = {
    modelValue: File | null;
    isShow: boolean;
};

type Emits = {
    "update:modelValue": [value: File];
    "update:isShow": [value: boolean];
};

// props

const props = defineProps<Props>();

const { modelValue, isShow } = toRefs(props);

// emits

const emit = defineEmits<Emits>();

// state

const visible = computed({
    get: () => isShow.value ?? false,
    set: (value: boolean) => emit("update:isShow", value),
});

const { addToast } = useToast();

const {
    open: openFileDialog,
    reset: resetFileDialog,
    onChange: onFileDialogChange,
} = useFileDialog({
    accept: ".jpg, .jpeg, .png",
    directory: false,
});

const avatars = ref([
    "/avatars/1.jpg",
    "/avatars/2.jpg",
    "/avatars/3.jpg",
    "/avatars/4.jpg",
    "/avatars/5.jpg",
]);

// queries

const { isPending: updateAccountIsPending } = useUpdateAccount();

// computed

const currentProfile = computed({
    get: () =>
        !!modelValue.value ? URL.createObjectURL(modelValue.value) : null,
    set: (value: File) => emit("update:modelValue", value),
});

// methods

onFileDialogChange((files: any) => {
    const file = files[0];

    if (file.size > 2 * 1024 * 1024) {
        addToast({
            message: "محدودیت حجم فایل حداکثر ۲ مگابایت می باشد",
            options: {
                status: "error",
            },
        });
        return;
    }
    emit("update:modelValue", file);
    resetFileDialog();
});
</script>

<template>
    <Modal v-model="visible" title="عکس پروفایل" icon="bi:image" iconSize="20">
        <template #trigger>
            <button
                class="bg-black text-slate-100 rounded-full p-2 flex-center absolute -bottom-0 -right-0"
            >
                <Icon name="bi:pencil" class="**:fill-slate-100" size="12" />
            </button>
        </template>
        <template #content>
            <div class="w-max">
                <div
                    class="w-full flex flex-col-reverse items-center justify-between py-10 gap-10 px-4"
                >
                    <div
                        class="flex items-center justify-between w-full flex-wrap gap-4 max-w-[500px]"
                    >
                        <button
                            v-for="(avatar, index) in avatars"
                            :key="index"
                            class="size-20 rounded-full focus:ring-2 focus:ring-offset-1 focus:ring-black transition-all"
                        >
                            <Avatar
                                :src="avatar"
                                :alt="`avatar-${index}`"
                                class="size-full"
                            />
                        </button>
                    </div>

                    <div
                        class="w-full flex-center gap-4 max-w-[500px] flex-wrap"
                    >
                        <button
                            class="size-8 rounded-full bg-orange-100 whitespace-nowrap ring-2 hover:ring-black ring-slate-200 ring-offset-3"
                        />
                        <button
                            class="size-8 rounded-full bg-orange-200 whitespace-nowrap ring-2 hover:ring-black ring-slate-200 ring-offset-3"
                        />
                        <button
                            class="size-8 rounded-full bg-amber-600 whitespace-nowrap ring-2 hover:ring-black ring-slate-200 ring-offset-3"
                        />
                        <button
                            class="size-8 rounded-full bg-amber-700 whitespace-nowrap ring-2 hover:ring-black ring-slate-200 ring-offset-3"
                        />
                        <button
                            class="size-8 rounded-full bg-amber-800 whitespace-nowrap ring-2 hover:ring-black ring-slate-200 ring-offset-3"
                        />
                    </div>

                    <div class="w-full flex-col-center gap-5">
                        <div
                            class="size-32 border border-slate-200 rounded-full"
                        >
                            <Avatar
                                :src="currentProfile"
                                :alt="''"
                                class="size-full"
                            />
                        </div>
                        <Button
                            class="rounded-full w-[8rem]"
                            @click="openFileDialog"
                            :loading="updateAccountIsPending"
                            size="md"
                        >
                            <Icon
                                v-if="updateAccountIsPending"
                                name="svg-spinners:3-dots-bounce"
                            />
                            <span v-else>آپلود عکس شما</span>
                        </Button>
                    </div>
                </div>
            </div>
        </template>
    </Modal>
</template>

<style scoped></style>
