import React, { useEffect, useState } from 'react';
import { findColumnKeyMerge, renderCell } from '../utils';
import { classNames } from '../../types';
import { PHXCheckbox } from '../../Checkbox';
function RowMerge({ mergeConfig, keyIdx, dataIdx, bodyKey, data, thBodyComponent, className, readonly, isHighlight, highlightReadonly, selectedAllPeople, tableKey, brSetSelectedPeople, selectedPeople, border, }) {
    const rowSpan = renderCell(data, bodyKey, thBodyComponent).row;
    const currentColumnKey = findColumnKeyMerge(mergeConfig, keyIdx);
    const renderInclude = (person) => {
        return !!selectedPeople.find((select) => JSON.stringify(select) === JSON.stringify(person));
    };
    const [checked, setChecked] = useState(renderInclude(data));
    useEffect(() => {
        setChecked(renderInclude(data));
    }, [renderInclude(data)]);
    const handleChange = (e) => {
        const checked = e.target.checked;
        setChecked(checked);
        const valueSelected = checked
            ? [...selectedPeople, data]
            : selectedPeople.filter((p) => JSON.stringify(p) !== JSON.stringify(data));
        brSetSelectedPeople(valueSelected);
    };
    return (React.createElement(React.Fragment, null,
        keyIdx === 0 && selectedAllPeople && selectedAllPeople.enable && (React.createElement("td", { key: keyIdx, className: classNames(border && 'border-r', dataIdx !== 0 && 'border-t', !isHighlight
                ? readonly
                    ? ''
                    : rowSpan > 1
                        ? 'bg-white'
                        : 'group-hover:bg-gray-50 group-hover:cursor-pointer'
                : '', isHighlight && !highlightReadonly ? 'group-hover:bg-gray-50 group-hover:cursor-pointer' : '', renderInclude(data) && !isHighlight && 'bg-gray-50') },
            React.createElement("div", { className: 'flex justify-center items-center pl-3', onClick: (event) => event.stopPropagation() },
                React.createElement(PHXCheckbox, { id: `${tableKey}-${dataIdx}`, checked: checked, onChange: (event) => handleChange(event) })))),
        data[`${currentColumnKey}_first_row`] || !findColumnKeyMerge(mergeConfig, keyIdx) ? (React.createElement("td", { key: keyIdx, rowSpan: rowSpan, className: classNames(className, !isHighlight
                ? readonly
                    ? ''
                    : rowSpan > 1
                        ? 'bg-white'
                        : 'group-hover:bg-gray-50 group-hover:cursor-pointer'
                : '', isHighlight && !highlightReadonly ? 'group-hover:bg-gray-50 group-hover:cursor-pointer' : '', renderInclude(data) && !isHighlight && rowSpan === 1 && 'bg-gray-50') }, renderCell(data, bodyKey, thBodyComponent).value)) : (React.createElement(React.Fragment, null))));
}
export default RowMerge;
//# sourceMappingURL=RowMerge.js.map