import { deleteAkun, saveAkun } from '@/api/api_akun';
import { alertConfirm, alertError, alertSuccess } from '@/components/costum/alert';
import { ButtonSubmit } from '@/components/costum/button_submit';
import DataTable, { Column } from '@/components/costum/DataTable';
import PageHeader from '@/components/costum/page_header';
import { useModalAkun } from '@/components/modal/modalAkun';
import { Akun } from '@/types';
import { useAkun } from '@/useQuery/query';
import { usePage } from '@inertiajs/react';
import { PlusCircle } from 'lucide-react';
import { useCallback, useMemo } from 'react';

export default function SetupAkunPage() {
    const akuns = useAkun();
    const { token } = usePage().props;

    const modalAkun = useModalAkun({
        onSubmit: async (akun) => {
            const response = await saveAkun(akun, token as string);
            const data = await response.json();
            if (response.status == 200 || response.status == 201) {
                akuns.refetch();
                await alertSuccess('Akun berhasil disimpan');
                return true;
            } else {
                await alertError(data.message);
                return false;
            }
        },
    });

    const handleDelete = useCallback(
        async (akun: Akun) => {
            const response = await deleteAkun(akun, token as string);
            const data = await response.json();

            if (response.status == 200 || response.status == 201) {
                akuns.refetch();
                await alertSuccess('Akun berhasil dihapus');
                return true;
            } else {
                await alertError(data.message);
                return false;
            }
        },
        [akuns, token],
    );

    const column: Column<Akun>[] = useMemo(
        () => [
            {
                label: <center>Kode Akun</center>,
                width: 120,
                align: 'center',
                value: (data: Akun) => data.kode_akun,
            },
            {
                label: <center>Nama Akun</center>,
                value: (data: Akun) => <div style={{
                    paddingLeft : (data.level ?? 0) * 10
                 }}>{data.nama}</div>,
            },
            {
                label: <center>Kategori</center>,
                width: 200,
                align: 'center',
                value: (data: Akun) => data.kategori,
            },
            {
                label: <center>Jurnal</center>,
                width: 100,
                align: 'center',
                value: (data: Akun) => data.jurnal,
            },
            {
                label: <center>Level</center>,
                width: 100,
                align: 'center',
                value: (data: Akun) => data.level,
            },
            {
                label: <center>Aksi</center>,
                width: 120,
                align: 'center',
                value: (data: Akun) => {
                    return (
                        data.kode_akun && (
                            <div className="d-flex gap-2 justify-content-center">
                                <div
                                    className="badge bg-primary"
                                    style={{ cursor: 'pointer' }}
                                    onClick={() => {
                                        modalAkun.open(data);
                                    }}
                                >
                                    Edit
                                </div>
                                <div
                                    className="badge bg-danger"
                                    style={{ cursor: 'pointer' }}
                                    onClick={async () => {
                                        const del = await alertConfirm('Apakah anda yakin ingin menghapus akun ini?');
                                        if (del.isConfirmed) {
                                            await handleDelete(data);
                                        }
                                    }}
                                >
                                    Hapus
                                </div>
                            </div>
                        )
                    );
                },
            },
        ],
        [handleDelete, modalAkun],
    );

    return (
        <>
            <div className="container">
                <PageHeader
                    title="Akun"
                    breadcrumb={[
                        {
                            title: 'Pengaturan',
                            path: '/app/pengaturan',
                        },
                        {
                            title: 'Akun',
                            path: '/app/pengaturan/akun',
                        },
                    ]}
                />
                <DataTable
                    data={akuns.data ?? []}
                    column={column}
                    pagination={true}
                    item_per_page={15}
                    search
                    buttons={
                        <ButtonSubmit
                            className="btn btn-primary"
                            icon={<PlusCircle size={18} />}
                            onClick={() => {
                                modalAkun.open();
                            }}
                        >
                            Tambah Akun
                        </ButtonSubmit>
                    }
                />
            </div>
            {modalAkun.modal}
        </>
    );
}