import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
import { forwardRef, useEffect, useRef } from 'react';
import styled from 'styled-components';
import { Checkbox } from '../checkbox/Checkbox.component';
const CheckBoxContainer = styled.div `
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 50px;
`;
const IndeterminateCheckbox = forwardRef(({ indeterminate, ...rest }, ref) => {
    const defaultRef = useRef(null);
    const resolvedRef = ref || defaultRef;
    useEffect(() => {
        resolvedRef.current.indeterminate =
            !!indeterminate;
    }, [resolvedRef, indeterminate]);
    return (_jsx(_Fragment, { children: _jsx(Checkbox, { ref: resolvedRef, ...rest }) }));
});
export const useCheckbox = (hooks) => {
    hooks.visibleColumns.push((columns) => {
        const test = [
            {
                id: 'selection',
                Header: ({ getToggleAllRowsSelectedProps }) => {
                    return (_jsx(CheckBoxContainer, { children: _jsx(IndeterminateCheckbox, { ...getToggleAllRowsSelectedProps() }) }));
                },
                Cell: ({ row }) => {
                    return (_jsx(CheckBoxContainer, { children: _jsx(IndeterminateCheckbox, { ...row.getToggleRowSelectedProps() }) }));
                },
                cellStyle: { width: '50px' },
                disableSortBy: true,
            },
            ...columns,
        ];
        return test;
    });
};
useCheckbox.pluginName = 'useCheckbox';
