<script lang="ts" setup>
import { computed } from 'vue';
// import { mdiTrendingDown, mdiTrendingUp, mdiTrendingNeutral } from '@mdi/js';
import CardBox from '@/Components/CardBox.vue';
import BaseLevel from '@/Components/BaseLevel.vue';
import PillTag from '@/Components/PillTag.vue';
import UserAvatar from '@/Components/UserAvatar.vue';

const props = defineProps({
    name: {
        type: String,
        required: true,
    },
    login: {
        type: String,
        required: false,
    },
    email: {
        type: String,
        required: false,
    },
    date: {
        type: String,
        required: false,
    },
    progress: {
        type: Number,
        default: 0,
    },
    count: {
        type: Number,
        default: 0,
    },
    text: {
        type: String,
        default: null,
    },
    type: {
        type: String,
        default: null,
    },
    allowEmailContact: {
        type: Boolean,
        default: false,
    }
});

const pillType = computed(() => {
    if (props.type) {
        return props.type;
    }

    if (props.count) {
        if (props.count >= 20) {
            return 'success';
        }
        if (props.count >= 5) {
            return 'warning';
        }

        return 'danger';
    }

    return 'info';
});

// const pillIcon = computed(() => {
//     return {
//         success: mdiTrendingUp,
//         warning: mdiTrendingNeutral,
//         danger: mdiTrendingDown,
//         info: mdiTrendingNeutral,
//     }[pillType.value];
// });

// const pillText = computed(() => props.text ?? `${props.progress}%`);
// </script>

<template>
    <CardBox class="mb-6 last:mb-0" hoverable>
        <BaseLevel>
            <BaseLevel type="justify-start">
                <UserAvatar class="w-12 h-12 mr-6" :username="props.name" />
                <div class="text-center md:text-left overflow-hidden">
                    <h4 class="text-xl text-ellipsis">
                        {{ name }}
                    </h4>
                    <p class="text-gray-500 dark:text-slate-400">                  
                        <div v-if="props.allowEmailContact">  {{ email }}</div>                      
                    </p>
                </div>
            </BaseLevel>
            <!-- <PillTag :type="pillType" :text="text" small :icon="pillIcon" /> -->

            <div class="text-center md:text-right space-y-2">
                <p class="text-sm text-gray-500">
                   Count
                </p>
                <div>
                    <PillTag :type="pillType" :text="String(count)" small />
                </div>
            </div>

        </BaseLevel>
    </CardBox>
</template>
