import * as tslib_1 from "tslib";
import React, { useRef, useState, useImperativeHandle, useEffect, } from 'react';
import { PrototypeCheck } from '../utils';
import { TableBase } from '..';
import { usePrevious } from 'react-use';
var InputSearchTable = function (props, ref) {
    var _a = useState(false), tableVisible = _a[0], setTableVisible = _a[1];
    var _b = useState(), apiParam = _b[0], setApiParam = _b[1];
    var tableRef = useRef();
    var prevParam = usePrevious(apiParam);
    var _c = props.tableConfig, fetchApi = _c.fetchApi, ExtraHeader = _c.ExtraHeader, ExtraFooter = _c.ExtraFooter, normalizeValue = _c.normalizeValue, searchKey = _c.searchKey, onRow = _c.onRow, normalizeApiParams = _c.normalizeApiParams, normalizeInputValue = _c.normalizeInputValue, rest = tslib_1.__rest(_c, ["fetchApi", "ExtraHeader", "ExtraFooter", "normalizeValue", "searchKey", "onRow", "normalizeApiParams", "normalizeInputValue"]);
    var onRowCB = props.onRowCB, inputValue = props.inputValue, style = props.style;
    var clickRowCb = function (record) {
        setTableVisible(false);
        onRowCB &&
            onRowCB(normalizeValue, record, normalizeInputValue ? normalizeInputValue(record) : null);
    };
    var handleContainerClick = function (event) {
        event.nativeEvent.stopImmediatePropagation();
    };
    var setRow = function (record) {
        var _a;
        return _a = {},
            _a[onRow] = function () {
                clickRowCb(record);
            },
            _a;
    };
    useImperativeHandle(ref, function () { return ({
        setTableVisible: setTableVisible,
    }); });
    useEffect(function () {
        function setUnVisible() {
            setTableVisible(false);
        }
        document.addEventListener('click', setUnVisible);
        return function () { return document.removeEventListener('click', setUnVisible); };
    }, []);
    useEffect(function () {
        var _a;
        tableVisible &&
            setApiParam((_a = {},
                _a[searchKey] = inputValue,
                _a));
    }, [searchKey, inputValue, tableVisible]);
    return (React.createElement("div", { className: "inputsearch-table-container", style: tslib_1.__assign({ display: tableVisible ? 'block' : 'none' }, style), onClick: handleContainerClick },
        React.createElement("div", { className: "inputsearch-table-header" }, PrototypeCheck.isFunction(ExtraHeader) ? (React.createElement(ExtraHeader, { tableRef: tableRef, setTableVisible: setTableVisible })) : ('')),
        React.createElement("div", { className: "inputsearch-table" },
            React.createElement(TableBase, tslib_1.__assign({ ref: tableRef, fetchApi: fetchApi, apiParams: normalizeApiParams ? normalizeApiParams(apiParam) : apiParam, onRow: function (record) { return setRow.call(null, record); }, onPageChange: function (pageNo, pageSize) {
                    return setApiParam(tslib_1.__assign({}, prevParam, apiParam, { pageNo: pageNo, pageSize: pageSize }));
                } }, rest))),
        React.createElement("div", { className: "inputsearch-table-footer" }, PrototypeCheck.isFunction(ExtraFooter) ? (React.createElement(ExtraFooter, { tableRef: tableRef, setTableVisible: setTableVisible })) : (''))));
};
export default React.forwardRef(InputSearchTable);
//# sourceMappingURL=index.js.map