import { jsx as _jsx } from "react/jsx-runtime";
import { forwardRef, useRef } from 'react';
import styled, { css } from 'styled-components';
import SelectionCard, { focusableSelector } from '../SelectionCard/SelectionCard';
import Text from '../Text';
import { useConsolidatedRef, useTestIds, useUID } from '../../hooks';
import { getActiveElement, withTestIds } from '../../utils';
import { defaultThemeProp } from '../../theme';
import Checkbox from './Checkbox';
import { getCheckboxCardTestIds } from './Checkbox.test-ids';
const StyledSelectionCard = styled.div(({ disabled, readOnly, theme: { components: { 'form-control': { ':hover': { 'border-color': hoverBorderColor } } } } }) => {
    return css `
      ${!disabled &&
        css `
        cursor: pointer;
      `}

      ${!(disabled || readOnly) &&
        css `
        :hover:not(:focus-within) {
          border-color: ${hoverBorderColor};
        }
      `}
    `;
});
StyledSelectionCard.defaultProps = defaultThemeProp;
const CheckboxCard = forwardRef(function CheckboxCard(props, ref) {
    const uid = useUID();
    const { testId, id = uid, label, disabled, readOnly, onChange, onClick, onKeyDown, status, checked, value, ...restProps } = props;
    const cardId = `${id}-card`;
    const testIds = useTestIds(testId, getCheckboxCardTestIds);
    const inputRef = useConsolidatedRef(ref);
    const containerRef = useRef(null);
    return (_jsx(StyledSelectionCard, { ...restProps, id: cardId, as: SelectionCard, testId: testIds, label: label, heading: _jsx(Checkbox, { testId: testIds.root, onChange: onChange, onClick: onClick, status: status, checked: checked, value: value, id: id, disabled: disabled, readOnly: readOnly, label: _jsx(Text, { variant: 'h4', as: 'span', children: label }), variant: 'simple', ref: inputRef, onKeyDown: onKeyDown }), readOnly: readOnly, disabled: disabled, onClick: (e) => {
            const target = e.target;
            if (readOnly || !containerRef.current?.contains(target))
                return;
            if (containerRef.current &&
                [...containerRef.current.querySelectorAll(focusableSelector)].includes(target))
                return;
            e.preventDefault();
            inputRef.current?.click();
            (inputRef.current?.hasAttribute('data-main-focus')
                ? inputRef
                : containerRef).current?.focus();
        }, onKeyDown: (e) => {
            if (e.key === ' ' && containerRef.current === getActiveElement()) {
                e.preventDefault();
                inputRef.current?.click();
            }
        }, ref: containerRef }));
});
export default withTestIds(CheckboxCard, getCheckboxCardTestIds);
//# sourceMappingURL=CheckboxCard.js.map