import { saveUser } from '@/api/api_user';
import { 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 { useModalUser } from '@/components/modal/modalUser';
import { User } from '@/types';
import { useUser } from '@/useQuery/query';
import { usePage } from '@inertiajs/react';
import { Eye, PlusCircle } from 'lucide-react';

export default function SetupUser() {
    const { token } = usePage().props;
    const users = useUser();

    const modalUser = useModalUser({
        onSubmit: async (usr) => {
            const response = await saveUser(usr, token as string);
            const data = await response.json();
            if (response.status == 200 || response.status == 201) {
                users.refetch();
                await alertSuccess('User berhasil disimpan');
                return true;
            } else {
                await alertError(data.message);
                return false;
            }
        },
    });

    const column: Column<User>[] = [
        {
            label: 'Nama',
            value: (data: User) => data.name,
        },
        {
            label: <center>Username</center>,
            width: 200,
            align: 'center',
            value: (data: User) => data.username,
        },
        {
            label: <center>Email</center>,
            width: 200,
            align: 'center',
            value: (data: User) => data.email,
        },
        {
            label: <center>Role</center>,
            width: 200,
            align: 'center',
            value: (data: User) => data.role?.nama,
        },
        {
            label: <center></center>,
            width: 80,
            align: 'center',
            value: (data: User) => (
                <span onClick={() => modalUser.open(data)} className="c-pointer">
                    <Eye size={18} />
                </span>
            ),
        },
    ];

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