<template>
    <div class="row zig-zag-top">
        <div class="col bg-white padding-25">
            <div class="row p-b-10">
                <div class="col">
                    <div class="font-heading all-caps bold fs-10">Request Refund</div>
                </div>
            </div>
            <div class="row m-b-10">
                <div class="col-7">
                    <div class="font-heading all-caps fs-10 m-b-5">Refund Type:</div>
                    <div class="row p-l-15">
                        <div v-for="(method, index) in refundMethods" :key="index"
                            class="col p-t-20 p-b-20 bg-master-lightest text-center b-grey pointer"
                            :class="{ 'bg-complete text-white': method.name === state.refundMethod.name }"
                            @click="updateRefundType(method)">
                            {{ method.name }}
                        </div>
                    </div>
                </div>
            </div>
            <div class="row m-r-0 m-b-10" v-if="state.refundMethod.name === 'Partially Refund'">
                <div class="col">
                    <validation-wrapper-component :validator="v$.refundAmount">
                        <label>Amount</label>
                        <!-- <input class="form-control" name="amount" v-model="state.refundAmount" :disabled="state.refundMethod.name === 'Fully Refund'" v-money3="moneyV2"> -->
                        <input class="form-control" name="amount" v-model="state.refundAmount" v-money3="moneyV2">
                    </validation-wrapper-component>
                </div>
                <div class="col-auto b-r b-t b-b b-grey">
                    <div class="row h-100 align-items-center">
                        <div class="col">
                            <div class="font-heading fs-10 muted">{{ data.booking.fixed_currency.short_code }}</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row m-t-5 m-b-5">
                <div class="col">
                    <validation-wrapper-component :validator="v$.refundRemark">
                        <label>Refund Remarks</label>
                        <input class="form-control" name="amount" v-model="state.refundRemark" >
                    </validation-wrapper-component>
                </div>
            </div>
            <div class="row m-t-10 m-b-10">
                <div class="col">
                    <div class="font-heading all-caps fs-10 m-b-5">Paid Amount: {{ paidAmount }}</div>
                    <div class="font-heading all-caps fs-10 m-b-5" v-if="props.data.refunded_amount > 0">Refunded Amount: {{ (Math.round((props.data.refunded_amount + Number.EPSILON) * 100) / 100).toFixed(2) }}</div>
                    <div class="font-heading all-caps fs-10 m-b-5">Refund Amount Requested: {{ state.refundAmount }}</div>
                </div>
            </div>
            <div class="row">
                <div class="col-auto">
                    <button class="btn btn-lg btn-default bg-master-lightest b-rad-none all-caps fs-12"
                        data-dismiss="modal">Cancel</button>
                </div>
                <div class="col text-right">
                    <button class="btn btn-lg btn-success b-rad-none all-caps fs-12" @click="submitForm()">Confirm &
                        Proceed</button>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { reactive, computed } from 'vue';
import { useFormHandler } from '@/composables/useFormHandler';
import { maxValue, required } from "@vuelidate/validators";
import useVuelidate from '@vuelidate/core';
import { Money3Directive as vMoney } from 'v-money3';
import route from '@/general/functions/router';
import ValidationWrapperComponent from '@/components/general/forms/ValidationWrapperComponent.vue';

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

const { submit } = useFormHandler(props);

const state = reactive({
    refundAmount: (Math.round((props.data.original_amount - props.data.refunded_amount + Number.EPSILON) * 100) / 100).toFixed(2),
    refundRemark: '',
    refundMethod: { name: 'Fully Refund', status: false },
});

const refundMethods = [
    { name: 'Fully Refund', label: 'Full Refund' },
    { name: 'Partially Refund', label: 'Partial Refund' }
];

const moneyV2 = {
    decimal: '.',
    thousands: ',',
    precision: 2
};

const refundMaxValue = computed(() => {
    return (Math.round((props.data.original_amount - props.data.refunded_amount + Number.EPSILON) * 100) / 100).toFixed(2);
});

const rules = computed(() => ({
    refundAmount: {
        maxValue: maxValue(refundMaxValue.value)
    },
    refundRemark: {
        required
    }
}));

const v$ = useVuelidate(rules, state);

const paidAmount = computed(() => {
    return props.data.original_amount;
});

const updateRefundType = (refund: any) => {
    state.refundMethod = { ...refund, status: !state.refundMethod.status };
    if (state.refundMethod.name === 'Fully Refund') {
        state.refundAmount = refundMaxValue.value;
    }
};

const submitForm = async () => {
    const isFormCorrect = await v$.value.$validate();
    if (!isFormCorrect) return;

    const parameters = {
        amount: state.refundAmount,
        refundRemark: state.refundRemark
    };

    submit(route('api.booking.refund.create', props.data.booking.id, props.data.id), 'post', props.section, true, true, parameters);
};
</script>

