<template>
    <div class="row m-t-15">
        <div class="col">
            <div class="row align-items-end">
                <div class="col">
                    <div class="row">
                        <div class="col">
                            <div class="font-heading fs-10 muted all-caps">Order Reference No</div>
                            <p class="m-b-0 fs-12" v-if="!isUpdate">
                                {{ parameters.order_reference_no.join(', ') }}
                            </p>
                            <div class="row p-r-15 m-t-10" v-for="(order, index) in parameters.order_reference_no" :key="index" v-else>
                                <div class="col p-r-0">
                                    <div class="form-group no-margin form-group-default">
                                        <label>
                                            Order Reference No. {{ Number(index) + 1 }}
                                        </label>
                                        <input type="text" class="form-control" v-model="parameters.order_reference_no[index]">
                                    </div>
                                </div>
                                <div class="col-auto bg-danger pointer" v-if="parameters.order_reference_no.length > 1" @click="parameters.order_reference_no.splice(index, 1)">
                                    <div class="row h-100 align-items-center">
                                        <div class="col">
                                            <i class="fa fa-times fa-fw text-white"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row m-t-5" v-if="booking_status !== 3 && !isUpdate">
                        <div class="col-auto">
                            <p class="text-complete text-underline m-b-0 fs-12 pointer" @click="isUpdate = true">Update Order References</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row" v-show="isUpdate">
                <div class="col">
                    <div class="row m-t-10">
                        <div class="col">
                            <button class="btn btn-xs btn-outline-primary b-rad-none" @click="parameters.order_reference_no.push('')">
                                <i class="fa fa-plus m-r-5"></i>
                                Add Order Reference
                            </button>
                        </div>
                    </div>
                    <div class="row m-t-10">
                        <div class="col-8 p-r-5">
                            <button class="btn btn-block btn-sm btn-success b-rad-none" @click="updateOrderReferences">Update Order References</button>
                        </div>
                        <div class="col-4 p-l-5">
                            <button class="btn btn-block btn-sm btn-default b-rad-none" @click="resetOrderReference">Cancel</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, computed, watch } from 'vue';
import { useFormHandler } from '@/composables/useFormHandler';
import { useQueueStore } from '@/stores/queue';
import route from '@/general/functions/router';

interface Props {
    order_reference_no: any[];
    booking_id: number;
    booking_status: number;
    section: string;
}

const props = defineProps<Props>();

const isUpdate = ref(false);
const queueStore = useQueueStore();

const { parameters, submit } = useFormHandler({
    section: props.section,
    data: {
        order_reference_no: props.order_reference_no.map(attr => attr.value)
    }
});

const pendingQueue = computed(() => queueStore.isInCompleteQueue(props.section));

watch(pendingQueue, (inComplete) => {
    if (inComplete) {
        // Redundant method call from legacy code was removed as it was missing in the legacy component too.
        // If billing address refresh is needed, it should be implemented here.
    }
});

const resetOrderReference = () => {
    isUpdate.value = false;
    parameters.value.order_reference_no = props.order_reference_no.map(attr => attr.value);
};

const updateOrderReferences = () => {
    submit(route('api.booking.booking_order_reference.update', props.booking_id), 'put', props.section, true, true, parameters.value, {
        successHandler: () => {
            isUpdate.value = false;
            queueStore.reloadList({ name: props.section });
        }
    });
};

onMounted(() => {
    parameters.value.order_reference_no = props.order_reference_no.map(attr => attr.value);
});
</script>
