<template>
    <div class="row">
        <div class="col">
            <div class="row m-b-20 text-center" v-if="(authStore.isSuperAdmin || authStore.getUserId === '2231') && creditable">
                <div class="col">
                    <div class="row">
                        <div class="col p-r-5">
                            <div class="b-a b-grey bg-white p-t-20 p-b-20 p-l-45 p-r-45 pointer" :class="{ 'bg-success': parameters.transaction_type === 1, 'text-white': parameters.transaction_type === 1, 'b-grey': parameters.transaction_type !== 1 }" @click="parameters.transaction_type !== 1 ? parameters.transaction_type = 1 : parameters.transaction_type = 0">
                                <p class="no-margin bold">Credit</p>
                            </div>
                        </div>
                        <div class="col p-l-5">
                            <div class="b-a b-grey bg-white p-t-20 p-b-20 p-l-45 p-r-45 pointer" :class="{ 'bg-danger': parameters.transaction_type === 2, 'text-white': parameters.transaction_type === 2, 'b-grey': parameters.transaction_type !== 2 }" @click="parameters.transaction_type !== 2 ? parameters.transaction_type = 2 : parameters.transaction_type = 0">
                                <p class="no-margin bold">Debit</p>
                            </div>
                        </div>
                    </div>
                    <div class="row m-t-10" v-if="parameters.transaction_type !== 0">
                        <div class="col text-left">
                            <validation-wrapper-component :validator="v$.parameters.reference">
                                <label>Reference</label>
                                <input class="form-control" v-model="parameters.reference">
                            </validation-wrapper-component>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col">
                    <validation-wrapper-component :validator="v$.parameters.amount">
                        <label>{{ parameters.transaction_type === 2 ? 'Withdraw' : 'Top Up' }} Amount (MYR)</label>
                        <input class="form-control" v-model.lazy="parameters.amount" v-money3="moneyConfig">
                    </validation-wrapper-component>
                </div>
            </div>
            <div class="row m-t-15 m-l-0 m-r-0">
                <div class="col p-l-0 p-r-5">
                    <div class="btn btn-block btn-sm b-rad-none p-t-10 p-b-10 lh-15" @click="parameters.amount = '500.00'" :class="[{'btn-complete': getCleanAmount(parameters.amount) === 500}, {'btn-default': getCleanAmount(parameters.amount) !== 500}]">MYR<br>500</div>
                </div>
                <div class="col p-l-5 p-r-5">
                    <div class="btn btn-block btn-sm b-rad-none p-t-10 p-b-10 lh-15" @click="parameters.amount = '1000.00'" :class="[{'btn-complete': getCleanAmount(parameters.amount) === 1000}, {'btn-default': getCleanAmount(parameters.amount) !== 1000}]">MYR<br>1,000</div>
                </div>
                <div class="col p-l-5 p-r-0">
                    <div class="btn btn-block btn-sm b-rad-none p-t-10 p-b-10 lh-15" @click="parameters.amount = '3000.00'" :class="[{'btn-complete': getCleanAmount(parameters.amount) === 3000}, {'btn-default': getCleanAmount(parameters.amount) !== 3000}]">MYR<br>3,000</div>
                </div>
            </div>
            <div class="row m-t-10 m-l-0 m-r-0">
                <div class="col p-l-0 p-r-5">
                    <div class="btn btn-block btn-sm b-rad-none p-t-10 p-b-10 lh-15" @click="parameters.amount = '5000.00'" :class="[{'btn-complete': getCleanAmount(parameters.amount) === 5000}, {'btn-default': getCleanAmount(parameters.amount) !== 5000}]">MYR<br>5,000</div>
                </div>
                <div class="col p-l-5 p-r-5">
                    <div class="btn btn-block btn-sm b-rad-none p-t-10 p-b-10 lh-15" @click="parameters.amount = '10000.00'" :class="[{'btn-complete': getCleanAmount(parameters.amount) === 10000}, {'btn-default': getCleanAmount(parameters.amount) !== 10000}]">MYR<br>10,000</div>
                </div>
                <div class="col p-l-5 p-r-0">
                    <div class="btn btn-block btn-sm b-rad-none p-t-10 p-b-10 lh-15" @click="parameters.amount = '50000.00'" :class="[{'btn-complete': getCleanAmount(parameters.amount) === 50000}, {'btn-default': getCleanAmount(parameters.amount) !== 50000}]">MYR<br>50,000</div>
                </div>
            </div>
            <div class="row m-t-15 justify-content-center parentContainer" v-if="getCleanAmount(parameters.amount) > 0" >
                <div class="col-10">
                    <div class="btn btn-sm btn-complete btn-block b-rad-none requestModal" data-type="paymentSummary">Reload Credit</div>
                </div>
                <modal-component class="animate__animated animate__fast animate__fadeIn" styleType="fill-in" type="paymentSummary">
                    <loading-component style="height: 200px; top: 0;" key="1" color="success" v-show="isLoading" />
                    <div class="row" v-show="!isLoading">
                        <div class="col bg-white padding-25">
                            <div class="row m-b-20">
                                <div class="col">
                                    <div class="font-heading fs-11">You will be redirected to your bank to complete the payment of <span class="text-success bold">{{parameters.amount}} MYR</span> for wallet credit top up. After clicking on the confirm button below. please follow your bank instruction to complete the payment</div>
                                </div>
                            </div>
                            <div class="row m-b-5">
                                <div class="col">
                                    <button class="btn btn-sm all-caps b-rad-none btn-default bg-master-lighter" data-dismiss="modal">Cancel</button>
                                </div>
                                <div class="col-auto">
                                    <button class="btn btn-sm all-caps b-rad-none btn-success" @click="submitForm">Confirm & Proceed</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </modal-component>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { computed, onMounted } from 'vue';
import { useComponentHandler } from '@/composables/useComponentHandler';
import { useFormHandler } from '@/composables/useFormHandler';
import { useAuthStore } from '@/stores/auth';
import { useVuelidate } from '@vuelidate/core';
import { required, requiredIf } from '@vuelidate/validators';
import route from '@/general/functions/router';

interface Props {
    amount?: string;
    creditable?: boolean;
    data?: any;
    section?: string;
}

const props = withDefaults(defineProps<Props>(), {
    amount: '0.00',
    creditable: false,
    section: ''
});

const { item } = useComponentHandler(props);
const authStore = useAuthStore();

const moneyConfig = { decimal: '.', thousands: ',', precision: 2 };
const { parameters, submit, isLoading } = useFormHandler({
    section: props.section,
    data: {
        company_id: props.data?.id,
        amount: props.amount,
        transaction_type: 0,
        reference: ''
    }
});

onMounted(() => {
    parameters.value.amount = props.amount;
});

const minAllowedAmount = computed(() => {
    return parameters.value.transaction_type === 0 ? 10.0000 : 0;
});

const rules = computed(() => ({
    parameters: {
        amount: {
            required,
            minValue: 0
        },
        reference: {
            required: requiredIf(() => parameters.value.transaction_type !== 0)
        }
    }
}));

const v$ = useVuelidate(rules, { parameters });

const getCleanAmount = (val: any) => {
    if (typeof val === 'string') {
        return parseInt(val.replace(/,/g, ''));
    }
    return val;
};

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

    const endpoint = (parameters.value.transaction_type !== 0 && props.creditable)
        ? route('api.wallet.credit')
        : route('api.wallet.topup');

    submit(endpoint, 'post', props.section, true, true, parameters.value, {
        successHandler: (response: any) => {
            if (parameters.value.transaction_type === 0) {
                window.location.href = route('billplz.bill', response.payload.data.reference) + '?auto_submit=true';
                return;
            }
            location.reload();
        }
    });
};
</script>
