<template>
    <div class="">
        <h4 class="mb-3 text-lg font-medium text-center text-blue-300">
            {{ $t("Register.avaialble_balance") }}
            {{ currency(balance, "USD") }}
        </h4>
        <p
            v-if="balance <= minToWithdraw"
            class="mt-3 text-lg font-medium text-center text-red-300"
        >
            {{ $t("Register.balance_more") }}
            {{ currency(minToWithdraw, "USD") }}
        </p>
        <div
            v-else-if="billingData.length == 0"
            class="flex flex-col items-center justify-center gap-4 mt-3"
        >
            <p class="text-lg font-medium text-center text-red-300">
                {{ $t("Register.no_account") }}
            </p>
            <div class="items-center justify-center w-full mx-auto max-w-max">
                <Button buttonStyle="outline-blue" @click="addMethod">
                    {{ $t("Register.add_new_method") }}
                </Button>
            </div>
        </div>

        <FormKit
            v-else
            id="withdraw_form"
            #default="{ state: { valid } }"
            :actions="false"
            name="withdraw_form"
            type="form"
            @submit="withdraw"
        >
            <FormKit
                id="withdraw_amount"
                v-model="form.amount"
                :label="$t('Register.amount_to_withdraw')"
                :placeholder="$page.props.minimum_withdrawal_amount"
                required
                type="number"
                validation-label="amount"
            >
                <template #suffix>
                    <span class="text-xs text-gray-200">USD</span>
                </template>
            </FormKit>

            <FormKit
                type="select"
                v-model="form.billing_id"
                required
                name="country"
                :label="$t('Register.choose_account')"
            >
                <option
                    v-for="(account, i) in billingData"
                    :key="account.id"
                    :value="account.id"
                    class="text-sm font-medium text-gray-300"
                >
                    {{ account.currency }} ending with {{ account.last4 }}
                </option>
            </FormKit>

            <p v-if="error" class="mt-2 text-xs font-normal text-red-300">
                {{ $t("Register.amount_between") }}
                {{ currency(minToWithdraw, "USD") }} -
                {{ currency(balance, "USD") }}
            </p>

            <div class="flex items-center justify-center w-full">
                <Button
                    size="md"
                    type="submit"
                    :disabled="form.processing || !valid"
                    :loading="form.processing"
                    @click="withdraw"
                >
                    {{ $t("Register.submit") }}
                </Button>
            </div>
        </FormKit>
    </div>
    <Modal ref="new_account_modal" size="lg" @closed="closeModal">
        <NewAccountForm />
    </Modal>
</template>

<script>
import { useForm } from "@inertiajs/inertia-vue3";
import Button from "@/Jetstream/Button.vue";
import Modal from "@/components/General/Modal.vue";
import NewMethodForm from "@/components/wallet/NewMethodForm.vue";
import NewAccountForm from "@/components/wallet/NewAccountForm.vue";
import log from "../../../../vendor/laravel/vapor-ui/resources/js/mixins/log";

export default {
    props: {
        balance: Number,
        billingData: Array,
        walletId: Number,
    },

    data() {
        return {
            form: useForm({
                amount: null,
                billing_id: null,
                id: this.walletId,
                // account_id: this.form?.billing_id!=null? this.billingData.find((element)=>element.id===this.form.billing_id).account:null,
            }),
            minToWithdraw: parseInt(this.$page.props.minimum_withdrawal_amount),
            error: false,
        };
    },
    methods: {
        withdraw: function (e) {
            try {
                if (
                    this.form.amount >= this.minToWithdraw &&
                    this.form.amount <= this.balance
                ) {
                    this.error = false;
                    this.form.post(route("user.wallet.payout.request"), {
                        onSuccess: (res) => {},
                        onError: (errors) => {
                            console.error("error", errors);
                        },
                    });
                } else {
                    console.log("error");
                    this.error = true;
                }
                e.preventDefault();
            } catch (e) {
                console.log(e);
            }
        },
        addMethod() {
            console.log("add method");
            this.$refs["new_account_modal"].open();
        },

        closeModal() {
            this.$refs["new_account_modal"].close();
        },
    },
    components: {
        Button,
        Modal,
        NewMethodForm,
        NewAccountForm,
    },
};
</script>

<style></style>
