import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { useCrud } from "../../contexts";
import { Button, Card, Collection, DataTable, Dialog, Filter, Loader, } from "../../components";
import { useEffect } from "react";
import { useState } from "react";
import { empresaService } from "../docMockServices";
import { ListCrudDocsEditDialog } from "./ListCrudDocsEditDialog";
export const ListCrudDocsContentPersonas = () => {
    const { list, pagination, isLoading, fetchItems, deleteItem } = useCrud();
    const { listar } = empresaService;
    const [empresas, setEmpresas] = useState([]);
    const [isOpenDeleteDialog, setIsOpenDeleteDialog] = useState(false);
    const [isOpenEditDialog, setIsOpenEditDialog] = useState(false);
    const [selectedPersona, setSelectedPersona] = useState();
    const onDeletePersona = (persona) => {
        setSelectedPersona(persona);
        setIsOpenDeleteDialog(true);
    };
    const onDeletePersonaSubmit = async () => {
        if (selectedPersona) {
            await deleteItem.execute(selectedPersona);
            setIsOpenDeleteDialog(false);
            fetchItems.execute();
        }
    };
    const onEditPersona = (persona) => {
        setSelectedPersona(persona);
        setIsOpenEditDialog(true);
    };
    useEffect(() => {
        listar().then((empresas) => {
            setEmpresas(empresas);
        });
    }, [listar]);
    return (_jsxs(_Fragment, { children: [_jsxs(Card, { className: "bg-gray-50", title: "Personas", headerActions: _jsxs(Collection, { direction: "row", children: [_jsx(Button, { icon: "fa-plus", onClick: () => onEditPersona(undefined), children: "Agregar Persona" }), _jsx(Button, { icon: "fa-sync", onClick: () => fetchItems.execute() })] }), alwaysDisplayHeaderActions: true, children: [_jsxs("div", { className: "flex justify-between items-center my-2", children: [_jsxs(Collection, { direction: "row", wrap: true, children: [_jsx(Filter, { paramName: "filtro", label: "Buscar", filterType: "search" }), _jsx(Filter, { paramName: "idEmpresa", label: "Empresa", filterType: "autocomplete", options: empresas.map((empresa) => ({
                                            label: empresa.nombre,
                                            value: empresa.id.toString(),
                                        })) })] }), _jsx(Collection, { direction: "row", wrap: true, children: pagination })] }), _jsx(DataTable, { columns: [
                            { header: "Nombre", value: (row) => row.nombre },
                            { header: "Email", value: (row) => row.email },
                            {
                                header: "Fecha de Nacimiento",
                                value: (row) => row.fechaNacimiento.format("DD/MM/YYYY"),
                            },
                            {
                                header: "Empresas",
                                value: (row) => row.empresas.map((empresa) => empresa.nombre).join(", "),
                            },
                            {
                                align: "center",
                                actions: (row) => [
                                    _jsx(Button, { size: "sm", variant: "ghost", icon: "fa-edit", onClick: () => onEditPersona(row), children: "Editar" }, "edit"),
                                    _jsx(Button, { size: "sm", variant: "ghost", icon: "fa-trash", onClick: () => onDeletePersona(row), children: "Eliminar" }, "delete"),
                                ],
                            },
                        ], rows: list || [], maxRows: 10, isLoading: isLoading, loadingRows: 10 })] }), isOpenDeleteDialog && (_jsxs(Dialog, { isOpen: isOpenDeleteDialog, title: "Eliminar Persona", onClose: () => setIsOpenDeleteDialog(false), footer: _jsxs(_Fragment, { children: [_jsx(Button, { variant: "outline", onClick: () => setIsOpenDeleteDialog(false), disabled: deleteItem.isLoading, children: "Cancelar" }), _jsx(Button, { onClick: onDeletePersonaSubmit, disabled: deleteItem.isLoading, children: "Eliminar" })] }), children: [_jsx("p", { children: "\u00BFEst\u00E1s seguro de querer eliminar esta persona?" }), _jsx(Loader, { isLoading: deleteItem.isLoading })] })), isOpenEditDialog && (_jsx(ListCrudDocsEditDialog, { isOpen: isOpenEditDialog, onClose: () => setIsOpenEditDialog(false), persona: selectedPersona }))] }));
};
