<template>
    <div class="row zig-zag-top">
        <div class="col bg-white padding-25">
            <div class="row p-b-20 b-b b-dashed b-grey m-b-20">
                <div class="col">
                    <div class="row m-b-10" v-if="data">
                        <div class="col" v-if="data.billNo && data.billNo !== ''">
                            <div class="font-heading all-caps bold fs-10">Edit Recipient Bank Details ({{ data.billNo }})</div>
                        </div>
                        <div class="col" v-else>
                            <div class="font-heading all-caps bold fs-10">Edit Recipient Bank Details (Default)</div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col">
                            <div class="row m-b-10">
                                <div class="col">
                                    <div class="row parentContainer">
                                        <div class="col">
                                            <div class="row" v-show="!createBank && !isEditing">
                                                <div class="col-7 p-r-0">
                                                    <div class="row" id="select-list" name="select-list">
                                                        <div class="col">
                                                            <div class="form-group no-margin form-group-default">
                                                                <label>{{ data.serviceType.id === 4 ? '1688 Login Id/Email/Phone' : 'Account No.' }}</label>
                                                                <input type="text" class="form-control" v-model="account_no" @keyup="parameters.bankAccount = {}" @focus="dropdownStatus = true">
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="row">
                                                        <div class="col">
                                                            <div class="relative w-100">
                                                                <div class="absolute w-100 b-l b-b b-r b-grey" :class="[{'hide': !dropdownStatus}]" style="top: 100%; right: 0; z-index: 1;">
                                                                    <div class="row text-left no-margin bg-white">
                                                                        <div class="col no-padding">
                                                                            <div class="row no-margin"  v-for="bank in data.recipientBanks.filter(getAccountNumber)" v-bind:key="bank.id" >
                                                                                <div id="select-option" name="select-option" class="col b-b b-grey p-t-10 p-b-10 pointer  p-t-10 p-b-10" :class="['bg-master-lightest','text-master', 'hover-primary', 'pointer']" @click="selectBank(bank)">
                                                                                    <div class="row align-items-center justify-content-center">
                                                                                        <div class="col">
                                                                                            <div class="row">
                                                                                                <div class="col">
                                                                                                    <div class="font-heading bold lh-15 fs-13">{{bank.reference ? bank.reference + ' - ':''}}{{bank.holder_name}}</div>
                                                                                                </div>
                                                                                            </div>
                                                                                            <div class="row">
                                                                                                <div class="col">
                                                                                                    <div class="font-heading all-caps fs-13 muted"><b class="m-r-5 text-primary">{{bank.account_no}}</b> {{bank.bank_name}}</div>
                                                                                                </div>
                                                                                            </div>
                                                                                        </div>
                                                                                    </div>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-auto p-l-0" v-show="!createBank && account_no">
                                                    <button class="btn btn-sm h-100 btn-primary b-rad-none all-caps" @click="createBank = !createBank; dropdownStatus = false">
                                                        <i class="fa fa-plus m-r-5"></i>
                                                        Create New
                                                    </button>
                                                </div>
                                            </div>
                                            <div class="row" v-show="createBank || isEditing">
                                                <div class="col">
                                                    <bank-account-form-component v-if="data.serviceType.id !== 4"
                                                        section="bookingEditRecipientDetailSection"
                                                        :data="Object.keys(parameters.bankAccount).length ? parameters.bankAccount  : {account_no: account_no, company_id: data.company.id, country_id: 2, account_type: 2}"
                                                        :company_id="data.company.id"
                                                        :country_id="2"
                                                        :type="2"
                                                        :currency="data.serviceType.selectedCurrency.short_code"
                                                        :billNo="data.billNo"
                                                        :transactionId="data.transactionId"
                                                        :serviceType="data.serviceType"
                                                        :closable=false
                                                        :isEditing="isEditing"
                                                        :isCancelButtonHidden=true
                                                        v-on:createdBank="updateBank($event)"
                                                        v-on:updatedBankDetails="updatedBankDetails"
                                                        v-on:close="clearAccount()">
                                                    </bank-account-form-component>
                                                    <phone-account-form-component v-if="data.serviceType.id === 4"
                                                        section="bookingEditRecipientDetailSection"
                                                        :data="Object.keys(parameters.bankAccount).length ? parameters.bankAccount  : {account_no: account_no, company_id: data.company.id, country_id: 2, account_type: 2}"
                                                        :company_id="data.company.id"
                                                        :country_id="2" :type="2"
                                                        :billNo="data.billNo"
                                                        :transactionId="data.transactionId"
                                                        :serviceType="data.serviceType"
                                                        :closable=false
                                                        :isEditing="isEditing"
                                                        :isCancelButtonHidden=true
                                                        v-on:createdBank="updateBank($event)"
                                                        v-on:updatedBankDetails="updatedBankDetails"
                                                        v-on:close="clearAccount()" ></phone-account-form-component>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-auto" v-show="!isLoading">
                    <button id="cancel-new-booking" name="cancel-new-booking" class="btn btn-lg btn-default bg-master-lightest b-rad-none all-caps fs-12" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { useFormHandler } from '@/composables/useFormHandler';
import BankAccountFormComponent from '@/components/banks/forms/BankAccountFormComponent.vue';
import PhoneAccountFormComponent from '@/components/banks/forms/PhoneAccountFormComponent.vue';

const props = defineProps<{
    data: any;
    section?: string;
}>();

const emit = defineEmits(['updatedBankDetails']);

const { parameters, isLoading, closeModal } = useFormHandler(props);

const createBank = ref(false);
const isEditing = ref(true);
const recipientBanks = ref<any[]>([]);
const dropdownStatus = ref(false);
const account_no = ref('');

const getAccountNumber = (bank: any) => {
    return bank.account_no.startsWith(account_no.value);
};

const selectBank = (bank: any) => {
    account_no.value = bank.account_no;
    isEditing.value = true;
    createBank.value = false;
    parameters.value.bankAccount = bank;
    dropdownStatus.value = false;
};

const updateBank = (bank: any) => {
    selectBank(bank);
    recipientBanks.value.push(bank);
    parameters.value.bankAccount = bank;
    parameters.value.bankAccountDefault = bank;
};

const updatedBankDetails = (bank: any, transactionId: any) => {
    parameters.value.bankAccount = bank;
    parameters.value.bankAccountDefault = bank;

    const foundIndex = recipientBanks.value.findIndex(x => x.id === bank.id);
    if (foundIndex !== -1) {
        recipientBanks.value[foundIndex] = bank;
    }

    emit('updatedBankDetails', bank, transactionId);
    closeModal();
};

const clearAccount = () => {
    createBank.value = false;
    isEditing.value = false;
    account_no.value = '';
    parameters.value.bankAccount = {};
};

onMounted(() => {
    recipientBanks.value = props.data.recipientBanks || [];
});
</script>


