<template>
    <Card v-if="chatable">
        <section class="flex items-center justify-between h-full gap-2">
            <div class="flex flex-col gap-1.5 flex-1">
                <div class="text-xs flex items-center justify-start gap-0.5">
                    <span class="text-gray-200">
                        {{
                            isService
                                ? $t("Register.service_id") + ":"
                                : $t("Register.project_id")
                        }}
                    </span>
                    <span class="font-medium text-gray-300">
                        MH-{{ chatable.id }}
                    </span>
                </div>
                <div class="text-xs flex items-center justify-start gap-0.5">
                    <span class="text-gray-200">
                        {{
                            isService
                                ? $t("Register.service_titles") + ":"
                                : $t("Register.project_titles")
                        }}
                    </span>
                    <span class="text-sm font-medium text-gray-300">
                        {{ chatable.title }}
                    </span>
                </div>
                <div class="flex">
                    <Badge :color="badgeColor">
                        <span class="text-xs leading-6">
                            {{ badgeText }}
                        </span>
                    </Badge>
                </div>
            </div>
            <div class="flex items-start justify-end gap-2.5 h-full">
                <Button
                    :size="action.size"
                    :buttonStyle="action.color"
                    @click="action.action"
                    :disabled="action.disabled"
                    v-for="(action, i) in actions"
                    :key="i"
                >
                    {{ action.text }}
                </Button>
            </div>
        </section>
    </Card>
</template>

<script>
import Card from "@/components/Containers/ContentCard.vue";
import Badge from "@/components/General/Badge.vue";
import Button from "@/Jetstream/Button";
export default {
    props: {
        chat: {
            type: Object,
            required: true,
        },
        is: {
            type: String,
            required: true,
        },
    },
    components: {
        Card,
        Badge,
        Button,
    },
    computed: {
        badgeColor() {
            switch (
                !!this.chatable?.is_public ||
                this.chatable?.status == "Published"
            ) {
                case true:
                    return "black";
                case false:
                default:
                    return "gray";
            }
        },
        badgeText() {
            const type = this.chat.chatable_type.split("\\").pop();
            switch (
                !!this.chatable?.is_public ||
                this.chatable?.status == "Published"
            ) {
                case true:
                    return `Public ${type}`;
                case false:
                default:
                    return `Private ${type}`;
            }
        },
        actions() {
            if (this.is == "worker") {
                if (this.chat.chatable_type == "App\\Models\\Project")
                    switch (this.chatable?.status) {
                        // case "Open":
                        //     return [
                        //         {
                        //             text: "Hire",
                        //             color: "default",
                        //             size: "md",
                        //             action: this.hire,
                        //         },
                        //         {
                        //             text: "Decline",
                        //             color: "danger",
                        //             size: "md",
                        //             action: this.decline,
                        //         },
                        //     ];
                        // case "Cancelled":
                        //     return [
                        //         {
                        //             text: "Cancelled",
                        //             color: "danger",
                        //             size: "md",
                        //             disabled: true,
                        //         },
                        //     ];
                        // case "Completed":
                        // return [
                        //     {
                        //         text: "Completed",
                        //         color: "green",
                        //         size: "md",
                        //         disabled: true,
                        //     },
                        // ];
                        default:
                            return [];
                    }
                return [];
            } else return [];
        },
        chatable() {
            return this.chat.chatable;
        },
        isService() {
            return this.chat.chatable_type == "App\\Models\\Service";
        },
    },
};
</script>
