<template>
    <template v-if="proposal">
        <Button
            v-if="status !== 'Cancelled'"
            type="button"
            @click="openContactModal"
            size="full-sm"
        >
            <template v-if="type == 'worker'">
                {{
                    project?.contract?.contractor_signed_at
                        ? $t("Register.view_contract")
                        : $t("Register.sign_contract")
                }}
            </template>
            <template v-else>
                {{ $t("Register.view_contract") }}
            </template>
        </Button>

        <Button
            v-else
            class="capitalize"
            disabled
            size="full-sm"
            buttonStyle="danger"
        >
            {{ $t("Register.cancelled") }}
        </Button>
        <template v-if="type == 'client'">
            <ClientContractModal
                ref="contract_modal"
                :project="project"
                :proposal="proposal"
            />
        </template>
        <template v-else-if="type == 'worker'">
            <WorkerContractModal
                ref="contract_modal"
                :project="project"
                :proposal="proposal"
            />
        </template>
    </template>
</template>

<script>
import ClientContractModal from "@/components/Projects/Client/Contracts/ContractModal.vue";
import WorkerContractModal from "@/components/Projects/Worker/Contracts/ContractModal.vue";
import Button from "@/Jetstream/Button.vue";

export default {
    props: {
        project: {
            type: Object,
            required: true,
        },
        proposal: {
            type: Object,
            required: true,
        },
        type: {
            type: String,
            default: "client",
        },
    },
    methods: {
        closeContactModal() {
            this.$refs["contract_modal"].close();
        },
        openContactModal() {
            this.$refs["contract_modal"].open();
        },
    },
    components: {
        ClientContractModal,
        WorkerContractModal,
        Button,
    },
    computed: {
        status() {
            return this.project?.status;
        },
    },
};
</script>
