"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.RowTable = void 0;
const tslib_1 = require("tslib");
/* eslint-disable prettier/prettier */
const react_1 = tslib_1.__importStar(require("react"));
const Checkbox_1 = require("../Checkbox");
function classNames(...classes) {
    return classes.filter(Boolean).join(' ');
}
/**
 *
 * @param bodyIndex
 * @param item
 * @param thBody eg: ["id", "admissions_code", "student_name", "created_at"]
 * @param thBodyFilter
 * @param selectedPeople
 * @param brSetSelectedPeople
 * @constructor
 */
const RowTable = ({ bodyIndex, brSetSelectedPeople, itemBody, // Là bản ghi record từng hàng
selectedAllPeople, selectedPeople, thBody, thBodyComponent, thBodyFilter, onChange, directDetail, numericalOrder, disableSpacing, border, isCenterText, stickyColumnNumber, lefts, stickyColumnNumberRight, rights, hidePagination, dataTableAggregate, itemIndex, tableKey, }) => {
    var _a;
    function renderInclude(person) {
        return !!selectedPeople.find((select) => select.id === person.id);
        // @ts-ignore
        // return selectedPeople.includes(person)
    }
    function indexLeft() {
        switch (true) {
            case (numericalOrder === null || numericalOrder === void 0 ? void 0 : numericalOrder.sticky) && selectedAllPeople && selectedAllPeople.enable:
                return bodyIndex + 1;
            case (numericalOrder === null || numericalOrder === void 0 ? void 0 : numericalOrder.sticky) || (selectedAllPeople && selectedAllPeople.enable):
                return bodyIndex;
            default:
                return bodyIndex - 1;
        }
    }
    const [checked, setChecked] = (0, react_1.useState)(renderInclude(itemBody));
    (0, react_1.useEffect)(() => {
        setChecked(renderInclude(itemBody));
    }, [renderInclude(itemBody)]);
    /**
     * Kiểm tra có phải đang lấy dữ liệu bên trong 1 object khác hay không
     * @param value
     */
    const nestedSplit = (value) => value.split('.');
    const dataNestedSplit = nestedSplit(thBody[bodyIndex]);
    /**
     * Lấy value bên trong 1 object khác, hoặc lấy giá trị theo index mặc định
     * ví dụ: customer.name hoặc customer.address.name
     */
    const renderValue = () => {
        var _a, _b, _c, _d, _e, _f;
        const splitSize = dataNestedSplit.length;
        let value = '';
        switch (splitSize) {
            case 1:
                value = itemBody[thBody[bodyIndex]]; // itemBody[0], itemBody[1], itemBody[2], lấy value theo index của object javascript
                break;
            case 2:
                value = (_a = itemBody[dataNestedSplit[0]]) === null || _a === void 0 ? void 0 : _a[dataNestedSplit[1]];
                break;
            case 3:
                value = (_c = (_b = itemBody[dataNestedSplit[0]]) === null || _b === void 0 ? void 0 : _b[dataNestedSplit[1]]) === null || _c === void 0 ? void 0 : _c[dataNestedSplit[2]];
                break;
            case 4:
                value = (_f = (_e = (_d = itemBody[dataNestedSplit[0]]) === null || _d === void 0 ? void 0 : _d[dataNestedSplit[1]]) === null || _e === void 0 ? void 0 : _e[dataNestedSplit[2]]) === null || _f === void 0 ? void 0 : _f[dataNestedSplit[3]];
                break;
            default:
                break;
        }
        return {
            value: thBodyFilter ? thBodyFilter(value) : value,
            thBodyKey: thBody[bodyIndex], // trả về vị trí của index ví dụ 0, 1, 2
        };
    };
    const { thBodyKey, value } = renderValue();
    // Body component là 1 function hoặc là 1 value, nó sẽ là 1 function để callback ra ngoài để customize lại lớp render
    // thBodyComponent = value
    // thBodyComponent[thBodyKey]  = function(param1, param2)
    const isFunctionRender = thBodyComponent ? thBodyComponent[thBodyKey] : undefined;
    const renderKey = () => itemBody[thBody[bodyIndex]];
    /**
     * Kiểu render theo function đươợc truyền từ prod vào
     * @param funcCallback
     * @param value
     * @param itemBody
     */
    const isRenderColumnInRow = (funcCallback, { value, itemBody }) => {
        const isArray = Array.isArray(value);
        if (!isArray) {
            const result = funcCallback(value, itemBody);
            return (react_1.default.createElement("td", { className: classNames('whitespace-nowrap text-xs text-gray-900', checked && (selectedAllPeople === null || selectedAllPeople === void 0 ? void 0 : selectedAllPeople.enable) ? '!bg-gray-50' : '', !disableSpacing.disable ? 'pl-8' : 'px-0.5', disableSpacing.disable && (disableSpacing === null || disableSpacing === void 0 ? void 0 : disableSpacing.indexStart) > bodyIndex ? 'pl-8' : 'px-0.5', border && (!stickyColumnNumber || bodyIndex - 1 > stickyColumnNumber) && 'border-l', ((stickyColumnNumber && bodyIndex - 1 < stickyColumnNumber) ||
                    (stickyColumnNumberRight && stickyColumnNumberRight > thBody.length - 1 - bodyIndex)) &&
                    'z-20 sm:sticky sm:top-0 sm:bg-white', stickyColumnNumber && bodyIndex - 1 < stickyColumnNumber && 'sm:drop-shadow-[4px_0_4px_rgba(0,0,0,0.1)]', stickyColumnNumberRight &&
                    stickyColumnNumberRight - 1 === thBody.length - 1 - bodyIndex &&
                    'sm:drop-shadow-[-4px_0_4px_rgba(0,0,0,0.1)]', hidePagination &&
                    itemIndex === dataTableAggregate - 1 &&
                    bodyIndex === thBody.length - 1 &&
                    'rounded-br-lg'), style: (stickyColumnNumber && bodyIndex - 1 < stickyColumnNumber) ||
                    (stickyColumnNumberRight && stickyColumnNumberRight > thBody.length - 1 - bodyIndex)
                    ? {
                        ...(indexLeft() >= lefts.length
                            ? { right: rights[thBody.length - 1 - bodyIndex] }
                            : { left: lefts[indexLeft()] }),
                    }
                    : {} },
                stickyColumnNumber && bodyIndex - 1 < stickyColumnNumber && border ? (react_1.default.createElement("div", { className: 'absolute -left-0 top-0 h-full w-[1px] bg-gray-300' })) : (react_1.default.createElement(react_1.default.Fragment, null)),
                result));
        }
        // Nếu là kiểu mảng thì return luôn function, vì trong function xử lý mảng bên ngoài phải trả về list <td>
        return funcCallback(value, itemBody);
    };
    const handleChange = (e) => {
        setChecked(e.target.checked);
        brSetSelectedPeople(e.target.checked
            ? // @ts-ignore
                [...selectedPeople, itemBody]
            : selectedPeople.filter((p) => p.id !== itemBody.id));
        if (onChange)
            onChange(e.target.checked
                ? // @ts-ignore
                    [...selectedPeople, itemBody]
                : selectedPeople.filter((p) => p.id !== itemBody.id));
    };
    const handleDirectDetail = (e, item) => {
        if (directDetail && directDetail.enable) {
            e.stopPropagation();
            directDetail.onClick(item);
        }
        else {
            return;
        }
    };
    return (react_1.default.createElement(react_1.default.Fragment, null,
        bodyIndex === 0 && selectedAllPeople && selectedAllPeople.enable ? (react_1.default.createElement("td", { className: classNames('w-16 px-8', checked && (selectedAllPeople === null || selectedAllPeople === void 0 ? void 0 : selectedAllPeople.enable) ? '!bg-gray-50' : '', stickyColumnNumber
                ? 'z-20 sm:sticky sm:left-0 sm:top-0 sm:bg-white sm:drop-shadow-[4px_0_4px_rgba(0,0,0,0.1)]'
                : 'relative', stickyColumnNumber && hidePagination && 'rounded-bl-lg'), style: stickyColumnNumber ? { left: lefts[0] } : {} },
            react_1.default.createElement("label", { className: 'absolute left-6 -ml-2 -mt-4 p-2 hover:cursor-pointer sm:top-1/2', onClick: (e) => e.stopPropagation() },
                react_1.default.createElement(Checkbox_1.PHXCheckbox, { id: `${tableKey}-value-${itemIndex + 1}`, checked: checked, className: `${(itemBody === null || itemBody === void 0 ? void 0 : itemBody.entered_school) ? 'hidden' : ''} mt-1`, disabled: itemBody === null || itemBody === void 0 ? void 0 : itemBody.entered_school, onChange: (e) => handleChange(e), type: 'checkbox', value: renderKey() })))) : (react_1.default.createElement(react_1.default.Fragment, null)),
        bodyIndex === 0 && numericalOrder && numericalOrder.enable && (react_1.default.createElement("td", { className: classNames((_a = numericalOrder === null || numericalOrder === void 0 ? void 0 : numericalOrder.className) !== null && _a !== void 0 ? _a : 'w-[10ch] whitespace-nowrap text-xs text-gray-900', checked && (selectedAllPeople === null || selectedAllPeople === void 0 ? void 0 : selectedAllPeople.enable) ? '!bg-gray-50' : '', !numericalOrder.disableSpacing ? 'mx-auto w-[10ch] pl-8' : '', stickyColumnNumber || (numericalOrder === null || numericalOrder === void 0 ? void 0 : numericalOrder.sticky)
                ? 'sm:bg-white sm:drop-shadow-[4px_0_4px_rgba(0,0,0,0.1)]'
                : '', (numericalOrder === null || numericalOrder === void 0 ? void 0 : numericalOrder.sticky) && 'z-20 sm:sticky sm:left-0 sm:top-0', (numericalOrder === null || numericalOrder === void 0 ? void 0 : numericalOrder.sticky) && hidePagination && 'rounded-bl-lg'), style: (numericalOrder === null || numericalOrder === void 0 ? void 0 : numericalOrder.sticky)
                ? {
                    left: selectedAllPeople && selectedAllPeople.enable ? lefts[1] : lefts[0],
                }
                : {} },
            react_1.default.createElement("div", { className: classNames(isCenterText ? 'flex items-center justify-center' : '') }, numericalOrder.order))),
        bodyIndex === 1 ? (react_1.default.createElement("td", { className: classNames('whitespace-nowrap text-xs text-gray-900', selectedAllPeople && selectedAllPeople.enable ? 'px-3' : '', checked && (selectedAllPeople === null || selectedAllPeople === void 0 ? void 0 : selectedAllPeople.enable) ? '!bg-gray-50' : '', directDetail && directDetail.enable ? 'cursor-pointer hover:underline' : '', !disableSpacing.disable ? 'w-12 px-6 py-3 pl-8 pr-3 sm:w-16 sm:px-8' : 'px-0.5', disableSpacing.disable && (disableSpacing === null || disableSpacing === void 0 ? void 0 : disableSpacing.indexStart) > bodyIndex
                ? 'w-12 px-6 pl-8 pr-3 sm:w-16 sm:px-8'
                : 'px-0.5', border && !stickyColumnNumber && 'border-l', stickyColumnNumber &&
                'z-20 sm:sticky sm:left-0 sm:top-0 sm:bg-white sm:drop-shadow-[4px_0_4px_rgba(0,0,0,0.1)]', stickyColumnNumber &&
                hidePagination &&
                itemIndex === dataTableAggregate - 1 &&
                (!numericalOrder || !numericalOrder.enable) &&
                (!selectedAllPeople || !selectedAllPeople.enable) &&
                'rounded-bl-lg', hidePagination &&
                itemIndex === dataTableAggregate - 1 &&
                !(numericalOrder === null || numericalOrder === void 0 ? void 0 : numericalOrder.enable) &&
                !(selectedAllPeople === null || selectedAllPeople === void 0 ? void 0 : selectedAllPeople.enable) &&
                'rounded-bl-lg'), onClick: (e) => handleDirectDetail(e, itemBody), style: stickyColumnNumber
                ? {
                    left: (numericalOrder === null || numericalOrder === void 0 ? void 0 : numericalOrder.sticky) && selectedAllPeople && selectedAllPeople.enable
                        ? lefts[2]
                        : (numericalOrder === null || numericalOrder === void 0 ? void 0 : numericalOrder.sticky) || (selectedAllPeople && selectedAllPeople.enable)
                            ? lefts[1]
                            : lefts[0],
                }
                : {} },
            stickyColumnNumber && border ? react_1.default.createElement("div", { className: 'absolute -left-0 top-0 h-full w-[1px] bg-gray-300' }) : react_1.default.createElement(react_1.default.Fragment, null),
            isFunctionRender ? isFunctionRender(value, itemBody) : value)) : (react_1.default.createElement(react_1.default.Fragment, null)),
        bodyIndex > 1 ? (isFunctionRender ? (isRenderColumnInRow(isFunctionRender, { value, itemBody })) : (react_1.default.createElement("td", { className: classNames('whitespace-nowrap text-xs text-gray-900', !disableSpacing.disable ? 'px-6 py-3 pl-8 pr-3 sm:w-16 sm:px-8' : 'px-0.5', checked && (selectedAllPeople === null || selectedAllPeople === void 0 ? void 0 : selectedAllPeople.enable) ? '!bg-gray-50' : '', disableSpacing.disable && (disableSpacing === null || disableSpacing === void 0 ? void 0 : disableSpacing.indexStart) > bodyIndex
                ? 'px-6 py-3 pl-8 pr-3 sm:w-16 sm:px-8'
                : 'px-0.5', border && (!stickyColumnNumber || bodyIndex - 1 > stickyColumnNumber) && 'border-l', ((stickyColumnNumber && bodyIndex - 1 < stickyColumnNumber) ||
                (stickyColumnNumberRight && stickyColumnNumberRight > thBody.length - 1 - bodyIndex)) &&
                'z-20 sm:sticky sm:top-0 sm:bg-white', stickyColumnNumber && bodyIndex - 1 < stickyColumnNumber && 'sm:drop-shadow-[4px_0_4px_rgba(0,0,0,0.1)]', stickyColumnNumberRight &&
                stickyColumnNumberRight - 1 === thBody.length - 1 - bodyIndex &&
                'sm:drop-shadow-[-4px_0_4px_rgba(0,0,0,0.1)]', hidePagination &&
                itemIndex === dataTableAggregate - 1 &&
                bodyIndex === thBody.length - 1 &&
                'rounded-br-lg'), style: (stickyColumnNumber && bodyIndex - 1 < stickyColumnNumber) ||
                (stickyColumnNumberRight && stickyColumnNumberRight > thBody.length - 1 - bodyIndex)
                ? {
                    ...(indexLeft() >= lefts.length
                        ? { right: rights[thBody.length - 1 - bodyIndex] }
                        : { left: lefts[indexLeft()] }),
                }
                : {} },
            stickyColumnNumber && bodyIndex - 1 < stickyColumnNumber && border ? (react_1.default.createElement("div", { className: 'absolute -left-0 top-0 h-full w-[1px] bg-gray-300' })) : (react_1.default.createElement(react_1.default.Fragment, null)),
            value))) : (react_1.default.createElement(react_1.default.Fragment, null))));
};
exports.RowTable = RowTable;
//# sourceMappingURL=RowTable.js.map