import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Icon } from "@powerhousedao/design-system";
import { memo, useCallback } from "react";
import { useDependentItemProps } from "../constants/dependent-items.js";
import { tableLabels } from "../constants/names.js";
import { useEditorContext } from "../context/editor-context.js";
import { useTableForm } from "../hooks/useTableForm.js";
import { RWAButton } from "./button.js";
import { FormInputs } from "./form-inputs.js";
import { useModal } from "./use-modal.js";
export const ItemDetails = memo(function ItemDetails(props) {
    const { tableName } = props;
    const { showModal, closeModal } = useModal();
    const { selectedTableItem, operation, viewItem, editItem, clearSelected, handleAction, isAllowedToCreateDocuments, isAllowedToEditDocuments, principalLenderAccountId, } = useEditorContext();
    const dependentItemProps = useDependentItemProps(tableName, selectedTableItem?.id);
    const hasDependentItems = dependentItemProps.some((p) => p.dependentItems.length > 0);
    const isEditOperation = operation === "edit";
    const isCreateOperation = operation === "create";
    const isViewOperation = operation === "view";
    const isAllowedToCreateOrEdit = isAllowedToCreateDocuments || isAllowedToEditDocuments;
    const isPrincipalLenderAccount = tableName === "ACCOUNT" &&
        selectedTableItem?.id === principalLenderAccountId;
    const isAllowedToDeleteItem = !isPrincipalLenderAccount;
    const showCancelButton = !isViewOperation && isAllowedToCreateOrEdit;
    const showSubmitButton = !isViewOperation && isAllowedToCreateOrEdit;
    const showDeleteButton = isEditOperation && isAllowedToEditDocuments && isAllowedToDeleteItem;
    const showEditButton = isViewOperation && isAllowedToEditDocuments;
    const showCloseButton = isViewOperation;
    const tableLabel = tableLabels[tableName];
    const { submit, reset, formInputs: { inputs, additionalInputs }, } = useTableForm({
        tableName,
        tableItem: selectedTableItem,
        operation,
    });
    const handleClose = useCallback(() => {
        reset();
        clearSelected();
    }, [clearSelected, reset]);
    const handleCancel = useCallback(() => {
        if (operation === "edit" && !!selectedTableItem) {
            viewItem(selectedTableItem, tableName);
            return;
        }
        handleClose();
    }, [handleClose, operation, selectedTableItem, tableName, viewItem]);
    const showDeleteModal = useCallback(() => {
        if (!isAllowedToDeleteItem || !hasDependentItems)
            return;
        showModal("deleteItem", {
            tableName,
            dependentItemProps,
        });
    }, [
        isAllowedToDeleteItem,
        hasDependentItems,
        showModal,
        tableName,
        dependentItemProps,
    ]);
    const handleDelete = useCallback(() => {
        if (!selectedTableItem)
            return;
        if (hasDependentItems) {
            showDeleteModal();
            return;
        }
        const editorDeleteActionType = `DELETE_${tableName}`;
        handleAction({
            type: editorDeleteActionType,
            payload: selectedTableItem,
        });
        clearSelected();
        closeModal();
    }, [
        selectedTableItem,
        hasDependentItems,
        tableName,
        handleAction,
        clearSelected,
        closeModal,
        showDeleteModal,
    ]);
    const onEditButtonClick = useCallback(() => {
        if (!selectedTableItem)
            return;
        editItem(selectedTableItem, tableName);
    }, [selectedTableItem, editItem, tableName]);
    const closeButton = (_jsx(RWAButton, { className: "text-gray-600", onClick: handleClose, children: "Close" }));
    const cancelButton = (_jsx(RWAButton, { className: "text-gray-600", onClick: handleCancel, children: "Cancel" }));
    const submitButton = (_jsx(RWAButton, { icon: _jsx(Icon, { name: "Save", size: 16 }), iconPosition: "right", onClick: submit, children: isCreateOperation ? "Save" : "Save Edits" }));
    const deleteButton = (_jsx("button", { onClick: handleDelete, children: _jsx(Icon, { className: "ml-3 text-red-800", name: "Trash", size: 22 }) }));
    const editButton = (_jsxs(RWAButton, { icon: _jsx(Icon, { name: "Pencil", size: 16 }), iconPosition: "right", onClick: onEditButtonClick, children: ["Edit ", tableLabel] }));
    return (_jsxs("div", { className: "flex flex-col rounded-md border border-gray-300 bg-white", children: [_jsxs("div", { className: "flex justify-between rounded-t-md border-b border-gray-300 bg-gray-100 p-3 font-semibold text-gray-800", children: [_jsx("div", { className: "flex items-center", children: selectedTableItem?.itemNumber
                            ? `${tableLabel} #${selectedTableItem.itemNumber}`
                            : `New ${tableLabel}` }), _jsxs("div", { className: "flex gap-x-2", children: [showCancelButton ? cancelButton : null, showCloseButton ? closeButton : null, showSubmitButton ? submitButton : null, showDeleteButton ? deleteButton : null, showEditButton ? editButton : null] })] }), _jsx(FormInputs, { inputs: inputs }), additionalInputs] }));
});
//# sourceMappingURL=item-details.js.map