<script>
    import api from "$lib/axios";
    import { onMount } from "svelte";

    export let context;
    export let pagination;
    export let modal;
    export let handleGetUsers;

    let form;
    let isLoadingOnSubmit = false;
    let alert = {
        success: true,
        message: "",
    };

    const handleSubmit = async () => {
        try {
            isLoadingOnSubmit = true;

            const response = await api.delete(`/users/${context.id}`);

            alert.success = true;
            alert.message = "";

            handleGetUsers(pagination.current_page, { withLoading: false });
            setTimeout(() => modal.hide(), 500);
        } catch (err) {
            alert.success = false;
            alert.message = err.message;
        } finally {
            isLoadingOnSubmit = false;
        }
    };

    onMount(() => {
        const bm = document.querySelector("#delete-user-modal");
        bm.addEventListener("hide.bs.modal", () => {
            setTimeout(() => {
                alert.message = "";
            }, 500);
        });
    });
</script>

<div
    id="delete-user-modal"
    class="modal fade"
    data-bs-backdrop="static"
    data-bs-keyboard="false"
    tabindex="-1"
    aria-hidden="true"
>
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            <div class="modal-status bg-danger"></div>
            <div class="modal-body text-center py-4">
                {#if alert.message}
                    <div class="alert alert-danger alert-dismissible mx-4" role="alert">
                        <div class="alert-icon">
                            <i class="ti ti-exclamation-circle"></i>
                        </div>
                        {alert.message}
                        <a href={"#"} class="btn-close" data-bs-dismiss="alert" aria-label="close"></a>
                    </div>
                {/if}
                <div class="ti ti-alert-triangle text-danger mb-2" style="font-size: 3rem !important;"></div>
                <h3>Anda Yakin?</h3>
                <div class="mx-4">
                    Yakin ingin menghapus pengguna ini? Tindakan ini bersifat permanen dan tidak dapat dibatalkan.
                </div>
            </div>
            <div class="modal-footer">
                <div class="w-100 d-flex gap-2">
                    <button type="button" class="btn w-100" data-bs-dismiss="modal">Batal</button>
                    <button
                        type="button"
                        class="btn btn-danger w-100"
                        disabled={isLoadingOnSubmit}
                        on:click={handleSubmit}
                    >
                        {#if isLoadingOnSubmit}
                            <div class="spinner-border spinner-border-sm" role="status">
                                <span class="visually-hidden">Loading...</span>
                            </div>
                        {:else}
                            Ya, Hapus
                        {/if}
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>
