import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { forwardRef, useEffect } from 'react';
import styled, { css } from 'styled-components';
import { hideVisually } from 'polished';
import FormField, { StyledFormFieldInfo } from '../FormField';
import { StyledFormControl } from '../FormControl';
import { defaultThemeProp } from '../../theme';
import { createClassName, tryCatch, withTestIds } from '../../utils';
import { useConsolidatedRef, useDirection, useI18n, useTestIds, useUID } from '../../hooks';
import { StyledLabel } from '../Label';
import { calculateFontSize, readableColor } from '../../styles';
import HiddenText from '../HiddenText';
import { getRadioCheckTestIds } from './RadioCheck.test-ids';
export const StyledPseudoRadioCheck = styled.div(props => {
    const { theme: { base: { spacing }, components: { 'form-field': formField, 'radio-check': { size, 'touch-size': touchSize, 'background-color': backgroundColor, 'border-color': borderColor, 'border-width': borderWidth } } }, status } = props;
    let statusBorderColor = borderColor;
    if (status === 'error' || status === 'warning') {
        statusBorderColor = formField[status]['status-color'];
    }
    return css `
      display: flex;
      flex-shrink: 0;
      position: relative;
      width: ${size};
      height: ${size};
      margin-inline-end: calc(0.5 * ${spacing});
      border: ${borderWidth} solid ${statusBorderColor};
      background-color: ${backgroundColor};

      @media (pointer: coarse) {
        width: ${touchSize};
        height: ${touchSize};
      }

      &::after {
        content: '';
        display: none;
      }
    `;
});
StyledPseudoRadioCheck.defaultProps = defaultThemeProp;
export const StyledRadioCheckInput = styled.input(props => {
    const { disabled, theme: { base: { 'border-radius': baseBorderRadius }, components: { 'form-control': { ':focus': { 'box-shadow': shadow, 'border-color': focusBorderColor }, ':read-only': { 'background-color': readOnlyBackgroundColor } }, 'radio-check': { size, ':checked': { 'background-color': checkedBackgroundColor, 'border-color': checkedBorderColor } }, checkbox: { 'border-radius': checkRadius }, 'radio-button': { 'border-radius': radioRadius } } } } = props;
    const backgroundColor = props.readOnly ? readOnlyBackgroundColor : checkedBackgroundColor;
    const foreground = tryCatch(() => readableColor(backgroundColor));
    const prcSelector = `+ ${StyledLabel} ${StyledPseudoRadioCheck}`;
    const { ltr } = useDirection();
    return css `
    ${hideVisually}
    margin: 0;

    /* Sets rect size for JAWS focus outline */
    width: ${size};
    height: ${size};

    ${!disabled &&
        css `
      &:focus ${prcSelector} {
        box-shadow: ${shadow};
        border-color: ${focusBorderColor};
      }
    `}
    &:checked
      ${prcSelector},
      &:checked:disabled
      ${prcSelector},
      &[type='checkbox']:indeterminate
      ${prcSelector},
      &[type='checkbox']:indeterminate:disabled
      ${prcSelector} {
      border-color: ${props.readOnly ? 'inherit' : checkedBorderColor};
      background-color: ${backgroundColor};

      &::after {
        display: block;
      }
    }

    &[type='radio'] ${prcSelector}, &[type='radio'] ${prcSelector}::after {
      border-radius: ${radioRadius};
    }

    &[type='radio'] ${prcSelector}::after {
      content: '';
      position: absolute;
      inset: 0;
      margin: auto;
      width: calc(${size} * 0.3);
      height: calc(${size} * 0.3);
      border-radius: ${radioRadius};
      border: calc(${size} * 0.2) solid ${foreground};
    }

    &[type='checkbox'] ${prcSelector} {
      border-radius: min(calc(${baseBorderRadius} * ${checkRadius}), 0.25rem);
    }

    &[type='checkbox']:not(:indeterminate) ${prcSelector} {
      &::after {
        width: 40%;
        height: 75%;
        ${ltr
        ? css `
              transform: rotate(45deg) translate(50%, -30%);
            `
        : css `
              transform: rotate(45deg) translate(-50%, 30%);
            `}
        border-right: 0.15em solid ${foreground};
        border-bottom: 0.15em solid ${foreground};
      }
    }

    &[type='checkbox']:indeterminate ${prcSelector} {
      display: flex;

      &::after {
        width: 90%;
        height: 0.15em;
        margin: auto;
        background-color: ${foreground};
      }
    }
  `;
});
StyledRadioCheckInput.defaultProps = defaultThemeProp;
export const StyledRadioCheck = styled.div(props => {
    const { disabled, readOnly, theme: { base, components: { 'radio-check': { label: { color: labelColor, 'font-weight': labelFontWeight } }, 'form-control': { ':hover': { 'border-color': hoverBorderColor } } } } } = props;
    const fontSize = calculateFontSize(base['font-size'], base['font-scale']);
    return css `
      > ${StyledLabel} {
        cursor: pointer;
        display: flex;
        align-items: center;
        font-weight: ${labelFontWeight};
        word-break: break-word;
        font-size: ${fontSize.s};
        color: ${labelColor};
        margin: 0;
        min-height: ${base['hit-area']['mouse-min']};

        @media (pointer: coarse) {
          min-height: ${base['hit-area']['finger-min']};
        }
      }

      > ${StyledFormFieldInfo} {
        margin: 0;
        padding-inline-start: calc(${base.spacing} / 4);
      }

      ${!(disabled || readOnly) &&
        css `
        &:not(:focus-within) > ${StyledLabel}:hover ${StyledPseudoRadioCheck} {
          border-color: ${hoverBorderColor};
        }
      `}
    `;
});
StyledRadioCheck.defaultProps = defaultThemeProp;
export const StyledRadioCheckCard = styled.label(({ disabled, readOnly, status, theme: { base: { palette, shadow, spacing }, components: { card, 'form-field': formField, 'radio-check': { label }, 'form-control': { ':hover': { 'border-color': hoverBorderColor } } } } }) => {
    const useBorderColor = status === 'error' ? formField.error['status-color'] : palette['border-line'];
    return css `
      min-width: min-content;
      cursor: pointer;
      background-color: ${card.background};
      border-radius: ${card['border-radius']};
      border: 0.0625rem solid ${useBorderColor};
      padding: ${spacing};

      ${disabled &&
        css `
        cursor: not-allowed;
      `}
      ${!(disabled || readOnly) &&
        css `
        :hover:not(:focus-within) {
          border-color: ${hoverBorderColor};

          ${StyledLabel} ${StyledPseudoRadioCheck} {
            border-color: ${hoverBorderColor};
          }
        }

        :focus-within {
          box-shadow: ${shadow.focus};
          border-color: transparent;
        }
      `}
        > ${StyledLabel} {
        display: flex;
        align-items: center;
        color: ${label.color};
        font-weight: ${label['font-weight']};
        margin: 0;
      }

      > ${StyledFormFieldInfo} {
        margin: 0;
        padding-inline-start: calc(${spacing} / 4);
      }
    `;
});
StyledRadioCheckCard.defaultProps = defaultThemeProp;
const RadioCheck = forwardRef(function RadioCheck(props, ref) {
    const uid = useUID();
    const t = useI18n();
    const { testId, type, id = uid, label, required = false, disabled = false, readOnly = false, indeterminate = false, checked, defaultChecked, variant = 'simple', onClick, onKeyDown, onChange, status, info, additionalInfo, ariaDescribedby, className, ...restProps } = props;
    const testIds = useTestIds(testId, getRadioCheckTestIds);
    const isRadio = type === 'radio';
    const card = variant === 'card';
    const newRef = useConsolidatedRef(ref);
    const readonlyDescId = useUID();
    useEffect(() => {
        if (!isRadio && newRef.current)
            newRef.current.indeterminate = !!indeterminate;
    }, [newRef, indeterminate, isRadio]);
    return (_jsx(FormField, { testId: testIds, as: card ? StyledRadioCheckCard : StyledRadioCheck, label: _jsxs(_Fragment, { children: [_jsx(StyledPseudoRadioCheck, { status: status, isRadio: isRadio, as: StyledFormControl, required: required, disabled: disabled, readOnly: readOnly, onMouseDown: (e) => e.preventDefault() }), label, readOnly && _jsx(HiddenText, { id: readonlyDescId, children: t('read_only') })] }), labelAs: card ? 'div' : undefined, id: id, required: required, disabled: disabled, readOnly: readOnly, status: status, info: info, isRadioCheck: true, inline: true, labelAfter: true, additionalInfo: additionalInfo, children: _jsx(StyledRadioCheckInput, { "data-testid": testIds.control, ...restProps, className: createClassName('radio-check', className, {
                variant,
                type
            }), id: id, type: type, required: required, checked: checked, defaultChecked: defaultChecked, "aria-describedby": readOnly ? `${ariaDescribedby} ${readonlyDescId}` : ariaDescribedby, disabled: disabled, readOnly: readOnly, onChange: onChange, onClick: (e) => {
                if (readOnly)
                    e.preventDefault();
                onClick?.(e);
            }, onKeyDown: (e) => {
                if (type === 'checkbox' && readOnly && e.key === ' ')
                    e.preventDefault();
                if (type === 'radio' && readOnly && e.key.includes('Arrow'))
                    e.preventDefault();
                onKeyDown?.(e);
            }, ref: newRef }) }));
});
export default withTestIds(RadioCheck, getRadioCheckTestIds);
//# sourceMappingURL=RadioCheck.js.map