<template>
    <div>
        <div class="flex flex-col w-full gap-5">
            <div class="flex flex-col w-full gap-5 lg:flex-row">
                <FormKit
                    :id="`milestone_name_${index}`"
                    v-model="_milestone.name"
                    :classes="{
                        outer: 'mb-0',
                    }"
                    :label="$t('Register.milestone_name') + '*'"
                    :name="`milestone_name_${index}`"
                    required
                    type="text"
                    validation="required|length:1,255"
                    :validation-label="'name'"
                />

                <FormKit
                    :id="`milestone_price_${index}`"
                    v-model="_milestone.amount"
                    :classes="{
                        outer: 'mb-0',
                    }"
                    :label="$t('proposal.milestone_price') + '*'"
                    :name="`milestone_price_${index}`"
                    required
                    type="number"
                    validation="required|number|min:1|max:9999999999"
                    :validation-label="'price'"
                >
                    <template #suffix>
                        <span
                            class="text-[10px] text-gray-200 select-none cursor-default px-0.5"
                        >
                            {{ project.currency.code_en }}
                        </span>
                    </template>
                </FormKit>
                <FormKit
                    :id="`milestone_you_will_recieve_${index}`"
                    v-model="calculatedFixedRate"
                    disabled
                    :classes="{
                        outer: 'mb-0 opacity-50',
                    }"
                    :label="$t('proposal.will_receive')"
                    :name="`milestone_you_will_recieve_${index}`"
                    required
                    type="text"
                    validation="required|number|min:1|max:9999999999"
                    :validation-label="'you_will_recieve'"
                >
                    <template #suffix>
                        <span
                            class="text-[10px] text-gray-200 select-none cursor-default px-0.5"
                        >
                            {{ project.currency.code_en }}
                        </span>
                    </template>
                </FormKit>
                <FormKit
                    :id="`milestone_duration_${index}`"
                    v-model="_milestone.duration"
                    :classes="{
                        outer: 'mb-0',
                    }"
                    :label="$t('proposal.milestone_duration') + '*'"
                    :name="`milestone_duration_${index}`"
                    required
                    type="number"
                    validation="required|number|min:1|max:1000"
                    :validation-label="'duration'"
                >
                    <template #suffix>
                        <span
                            class="text-[10px] text-gray-200 select-none cursor-default px-0.5"
                        >
                            {{
                                project.budget_type == "Rate"
                                    ? project.rate_type == "daily"
                                        ? "Days"
                                        : project.rate_type == "yearly"
                                        ? "Years"
                                        : project.rate_type == "monthly"
                                        ? "Months"
                                        : ""
                                    : "Days"
                            }}
                        </span>
                    </template>
                </FormKit>
            </div>
            <Deliverables
                v-model:deliverables="_milestone.deliverables"
                :label="$t('proposal.deliverable_list')"
            />
        </div>
        <div>
            <button
                type="button"
                @click="removeMilestone(index)"
                class="text-xs text-red-300 underline"
            >
                - Remove milestone
            </button>
        </div>
    </div>
</template>

<script>
import Deliverables from "@/components/Deliverables";

export default {
    components: {
        Deliverables,
    },
    props: {
        milestone: {
            type: Object,
            required: true,
        },
        project: {
            type: Object,
            required: true,
        },

        index: {
            type: Number,
            required: true,
        },
        removeMilestone: {
            type: Function,
            required: true,
        },
    },
    data() {
        return {
            _milstone: this.milestone,
        };
    },
    watch: {
        _milstone: {
            handler() {
                this.$emit("updated", this._milstone, this.index);
            },
            deep: true,
        },
    },
    computed: {
        calculatedDailyRate() {
            return this.calculateMuhandisinProfit(this.form.rates.daily);
        },
        calculatedMonthlyRate() {
            return this.calculateMuhandisinProfit(this.form.rates.monthly);
        },
        calculatedYearlyRate() {
            return this.calculateMuhandisinProfit(this.form.rates.yearly);
        },
        calculatedFixedRate() {
            return this.calculateMuhandisinProfit(this._milestone.amount);
        },
    },
    created() {
        this._milestone = this.milestone;
    },
};
</script>
