<template>
    <Card :title="$t('Register.project_analytics')">
        <div class="flex flex-col w-full gap-5">
            <div class="flex flex-col gap-1 bg-blue-200 rounded-lg p-2.5">
                <div class="flex items-center justify-between">
                    <span class="text-sm font-medium">{{$t('Register.total_proposals') }}</span>
                    <Button
                        :href="
                            route(
                                'client.projects.show',
                                proposal.project.slug
                            ) + '?tab=proposals'
                        "
                        size="xs"
                        buttonStyle="transparent"
                    >
                        <span class="text-blue-300 underline"> {{$t('Register.view_all') }} </span>
                    </Button>
                </div>
                <span class="text-xs font-medium text-green-300">{{
                    proposal.project.proposalCount
                }}</span>
            </div>
            <div class="flex flex-col w-full gap-2.5">
                <template v-for="action in actions" :key="action.text">
                    <Button
                        :disabled="action.disabled"
                        @click="action.action"
                        :size="action.size"
                        :buttonStyle="action.color"
                    >
                        {{ $t(action.text) }}
                    </Button>
                </template>
            </div>
        </div>
    </Card>
    <Contract ref="client_contract_modal" :proposal="proposal" />
</template>

<script>
import Card from "@/components/Containers/ContentCard";
import Button from "@/Jetstream/Button";
import { useForm } from "@inertiajs/inertia-vue3";
import Contract from "@/components/Projects/Client/Contracts/ProposalContractModal";
export default {
    props: {
        proposal: Object,
    },
    components: {
        Card,
        Button,
        Contract,
    },
    data() {
        return {
            form: useForm({
                message: {
                    text: "Hello, I'm interested in your project.",
                    attachement: null,
                },
                project: true,
            }),
            proposalForm: useForm({
                id: this.proposal.id,
            }),
        };
    },
    methods: {
        chat() {
            this.form.post(route("chat.create"), {
                preserveScroll: true,
                onSuccess: () => {},
                onError: (error) => {
                    console.error(error);
                },
            });
        },
        showContractModal() {
            this.$refs["client_contract_modal"].open();
        },
        accept() {
            this.showContractModal();
        },
        decline() {
            this.proposalForm.post(
                route("client.projects.proposals.decline", this.proposalForm.id)
            );
        },
    },
    // computed actions list based on project status
    computed: {
        actions() {
            // 'Pending Approval','Accepted','Declined'
            switch (this.proposal.status) {
                case "Pending Approval":
                    return [
                        {
                            text: "Register.accept_sign",
                            color: "default",
                            size: "full-sm",
                            action: this.showContractModal,
                        },
                        {
                            text: "Register.decline",
                            color: "danger",
                            size: "full-sm",
                            action: this.decline,
                        },
                    ];
                case "Declined":
                    return [
                        {
                            text: "Declined",
                            color: "danger",
                            size: "full-sm",
                            disabled: true,
                        },
                    ];
                case "Accepted":
                    return [
                        {
                            text: "Accepted",
                            color: "green",
                            size: "full-sm",
                            disabled: true,
                        },
                    ];
                default:
                    return [];
            }
        },
    },
    mounted() {},
};
</script>

<style></style>
