import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { Icon } from "@powerhousedao/design-system";
import { useFieldArray } from "react-hook-form";
import { twMerge } from "tailwind-merge";
import { RWANumberInput } from "./number-input.js";
import { RWATableSelect } from "./select.js";
export function FeeTransactionsTable(props) {
    const headings = ["Fees", "Service Provider", "Amount", ""];
    const { canHaveTransactionFees, serviceProviderFeeTypes, serviceProviderFeeTypeOptions, control, errors, isViewOnly, showCreateServiceProviderFeeTypeModal, } = props;
    const { fields, append, remove } = useFieldArray({
        control,
        name: "fees",
    });
    if (!canHaveTransactionFees) {
        return null;
    }
    return (_jsxs(_Fragment, { children: [fields.length > 0 && (_jsx("div", { className: "bg-gray-50 pl-5 pt-3", children: _jsxs("table", { className: "w-full border-separate text-xs font-medium", children: [_jsx("thead", { className: "mb-2", children: _jsx("tr", { children: headings.map((heading) => (_jsx("th", { className: twMerge("py-2 text-left font-medium text-gray-600", heading === "Amount" && !isViewOnly && "text-right"), children: heading }, heading))) }) }), _jsx("tbody", { children: fields.map((feeInput, index) => {
                                return (_jsxs("tr", { children: [_jsx("td", { className: "w-52" }), _jsx("td", { className: "w-96", children: _jsx(RWATableSelect, { addItemButtonProps: {
                                                    onClick: showCreateServiceProviderFeeTypeModal,
                                                    label: "Add Service Provider",
                                                }, "aria-invalid": errors.fees?.[index]?.serviceProviderFeeTypeId
                                                    ? "true"
                                                    : "false", control: control, disabled: isViewOnly, name: `fees.${index}.serviceProviderFeeTypeId`, options: serviceProviderFeeTypeOptions, rules: {
                                                    required: "Service provider is required",
                                                } }) }), _jsx("td", { className: "w-52", children: _jsx(RWANumberInput, { "aria-invalid": errors.fees?.[index]?.amount ? "true" : "false", control: control, currency: "USD", disabled: isViewOnly, name: `fees.${index}.amount`, placeholder: "E.g. $1,000.00", rules: {
                                                    required: "Amount is required",
                                                    validate: {
                                                        positive: (value) => (!!value && Number(value) > 0) ||
                                                            "Fee amount must be greater than zero",
                                                    },
                                                } }) }), _jsx("td", { className: "", children: !isViewOnly && (_jsx("button", { className: "flex items-center", onClick: () => remove(index), type: "button", children: _jsx(Icon, { className: "text-gray-900", name: "Xmark" }) })) })] }, feeInput.id));
                            }) })] }) })), !isViewOnly && (_jsxs("button", { className: "ml-[234px] mt-1 flex w-fit items-center justify-center gap-x-2 rounded-lg bg-white pb-6 text-sm font-semibold text-gray-900", onClick: () => append({
                    amount: null,
                    serviceProviderFeeTypeId: serviceProviderFeeTypes[0]?.id,
                }), children: [_jsx("span", { children: "Add Fee" }), _jsx(Icon, { name: "Plus", size: 16 })] }))] }));
}
//# sourceMappingURL=fee-transactions-table.js.map