<script lang="ts" setup>
import { computed } from 'vue';

const props = defineProps({
    username: {
        type: String,
        required: true,
    },
    defaultUrl: {
        type: String,
        required: false
    },
    api: {
        type: String,
        default: 'avataaars',
    },
});

const avatar = computed(() => {
    return props.defaultUrl ?? generateAvatarUrl(props.username);
});

const username = computed(() => props.username);

// const darkenColor = (color: string) => {
//     const r = parseInt(color.slice(0, 2), 16);
//     const g = parseInt(color.slice(2, 4), 16);
//     const b = parseInt(color.slice(4, 6), 16);

//     const darkerR = Math.round(r * 0.6);
//     const darkerG = Math.round(g * 0.6);
//     const darkerB = Math.round(b * 0.6);

//     const darkerColor = ((darkerR << 16) + (darkerG << 8) + darkerB).toString(16);

//     return darkerColor.padStart(6, '0');
// };

// const getColorFromName = (name: string): string => {
//     let hash = 0;
//     for (let i = 0; i < name.length; i++) {
//         hash = name.charCodeAt(i) + ((hash << 5) - hash);
//     }
//     let color = '#';
//     for (let i = 0; i < 3; i++) {
//         const value = (hash >> (i * 8)) & 0xff;
//         color += ('00' + value.toString(16)).substr(-2);
//     }
//     return color.replace('#', '');
// };

// const lightenColor = (hexColor: string, percent: number): string => {
//     let r = parseInt(hexColor.substring(0, 2), 16);
//     let g = parseInt(hexColor.substring(2, 4), 16);
//     let b = parseInt(hexColor.substring(4, 6), 16);

//     r = Math.floor(r * (100 + percent) / 100);
//     g = Math.floor(g * (100 + percent) / 100);
//     b = Math.floor(b * (100 + percent) / 100);

//     r = (r < 255) ? r : 255;
//     g = (g < 255) ? g : 255;
//     b = (b < 255) ? b : 255;

//     const lighterHex = ((r << 16) | (g << 8) | b).toString(16);

//     return lighterHex.padStart(6, '0');
// };

const generateAvatarUrl = (name: string): string => {
    // const originalColor = getColorFromName(name);
    // const backgroundColor = lightenColor(originalColor, 60);
    // const textColor = darkenColor(originalColor);

    const avatarUrl = `/api/avatar?name=${name}&size=50`;
    return avatarUrl;
};
</script>

<template>
    <div>
        <img :src="avatar" :alt="username"
            class="rounded-full block h-auto w-full max-w-full bg-gray-100 dark:bg-slate-800" />
    </div>
</template>
