import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React, { useMemo, useState } from "react";
import { ADPIcon, iconList } from "../adpIcon/adpIcon";
import { Button } from "../button/button";
import { Modal, ModalHeader, ModalBody } from "../modal/modal";
import { Radio } from "../radio/radio";
export const PageSizeModal = ({ show, pageSize, pageSizeOptions, toggleVisibility, onPageSizeChange: setPageSize, onPageChange }) => {
    const [selectedPageSize, setSelectedPageSize] = useState(pageSize);
    const handlePageSizeChange = (e) => {
        setSelectedPageSize(Number(e.target.value));
    };
    const onPageLimitChangeHandler = () => {
        // Reset to first page
        onPageChange === null || onPageChange === void 0 ? void 0 : onPageChange(1);
        // Update page size
        setPageSize === null || setPageSize === void 0 ? void 0 : setPageSize(selectedPageSize);
        toggleVisibility();
    };
    const sortedPageSizeOptions = useMemo(() => {
        const unique = pageSizeOptions === null || pageSizeOptions === void 0 ? void 0 : pageSizeOptions.filter((value, index) => (pageSizeOptions === null || pageSizeOptions === void 0 ? void 0 : pageSizeOptions.indexOf(value)) === index);
        return unique === null || unique === void 0 ? void 0 : unique.sort((a, b) => a - b);
    }, [pageSizeOptions]);
    return (_jsxs(Modal, { showModal: show, closeButton: false, onHide: toggleVisibility, children: [_jsxs(ModalHeader, { className: "font-medium flex-col", children: [_jsx("div", { className: "mb-5 w-9 h-9 rounded-full bg-primary-50 flex justify-center items-center dark:bg-secondary-500", children: _jsx(ADPIcon, { icon: iconList.editFilled, size: "md", className: "text-primary-500 dark:text-primary-400" }) }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx("h3", { className: "text-lg font-semibold text-secondary-800 dark:text-secondary-50", children: "Records per page" }), _jsx("p", { className: "text-sm font-normal text-secondary-600 dark:text-secondary-300", children: "Set the number records to be displayed per page" })] })] }), _jsxs(ModalBody, { className: "mt-5", children: [_jsx("div", { className: "pb-7 flex flex-wrap gap-4", children: sortedPageSizeOptions === null || sortedPageSizeOptions === void 0 ? void 0 : sortedPageSizeOptions.map((el) => (_jsx(Radio, { name: "pageSize", size: "sm", value: el.toString(), label: el.toString(), checked: el === selectedPageSize, onChange: handlePageSizeChange }, el))) }), _jsxs("div", { className: "flex items-center gap-4 justify-end mt-4", children: [_jsx(Button, { variant: "outline", onClick: toggleVisibility, children: "Cancel" }), _jsx(Button, { onClick: onPageLimitChangeHandler, children: "Confirm" })] })] })] }));
};
//# sourceMappingURL=pageSizeModal.js.map