import React, { useEffect, forwardRef } from 'react';
import classNames from 'classnames';
import { TruncateString } from '../truncate-string';
import { TruncateWithTooltip } from '../truncate-with-tooltip';
import { Tooltip, TOOLTIP_PLACEMENT_TYPES } from '../tooltip';
import { ELLIPSIS_PLACE_TYPES } from '../truncate-string/truncate-string';
import { useForwardRef } from '../hooks/use-forward-ref';
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
export const CHECKBOX_PLACEMENTS = {
  TOP: 'top',
  MIDDLE: 'middle'
};
/** Checkboxes are used for a list of options where the user may select multiple options.
 * [CAPITALIZATION] Use sentence case for labels
 * @midnight-gray-supported
 * @alpine-light-supported
 */
const Checkbox = /*#__PURE__*/forwardRef(({
  id,
  isChecked,
  isDisabled = false,
  isTruncatable = false,
  onChange = () => {},
  onKeyDown = event => event.stopPropagation(),
  labelText = '',
  subtext = '',
  indeterminate = false,
  className,
  testId,
  tooltipDocsLink,
  tooltipText,
  tooltipPlacement,
  placement = CHECKBOX_PLACEMENTS.MIDDLE,
  ariaLabel,
  tabIndex = 0,
  role,
  hasParentTooltip = false
}, ref) => {
  const checkBoxLabelId = !hasParentTooltip ? ['ds-checkbox-label-for', id].filter(Boolean).join('-') : undefined;
  const checkBoxDescriptionId = !hasParentTooltip ? ['ds-checkbox-description-for', id].filter(Boolean).join('-') : undefined;
  const getLabelTextContent = () => {
    if (subtext) {
      return /*#__PURE__*/_jsxs(_Fragment, {
        children: [/*#__PURE__*/_jsx("span", {
          id: checkBoxLabelId,
          children: labelText
        }), /*#__PURE__*/_jsx("div", {
          className: "checkbox-subtext",
          "test-id": "checkbox-subtext",
          id: checkBoxDescriptionId,
          children: isTruncatable ? /*#__PURE__*/_jsx(TruncateString, {
            text: subtext,
            truncateAt: ELLIPSIS_PLACE_TYPES.END
          }) : subtext
        })]
      });
    }
    return /*#__PURE__*/_jsx("span", {
      id: checkBoxLabelId,
      className: classNames({
        'sr-only': !labelText
      }),
      "test-id": "checkbox-label-text",
      children: labelText
    });
  };
  const getDefaultTooltipText = () => {
    // If subtext is available, we want to retain subtext structure
    // for tooltip.
    if (subtext) {
      return getLabelTextContent();
    }
    return labelText;
  };
  const testSelector = testId || id;
  const label =
  /*#__PURE__*/
  // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions
  _jsx("label", {
    className: classNames(className, {
      'top-placement': placement === CHECKBOX_PLACEMENTS.TOP
    }),
    htmlFor: id,
    "test-id": testSelector,
    onClick: e => e.stopPropagation(),
    "aria-label": ariaLabel,
    children: getLabelTextContent()
  });
  const [setRef, checkboxRef] = useForwardRef(ref);
  useEffect(() => {
    if (checkboxRef.current) {
      checkboxRef.current.indeterminate = indeterminate;
    }
  }, [indeterminate]);
  const checkBoxAttr = {
    ...(!!ariaLabel && {
      'aria-label': ariaLabel
    }),
    ...(!!labelText && !ariaLabel && {
      'aria-labelledby': checkBoxLabelId
    }),
    ...(!!subtext && {
      'aria-describedby': checkBoxDescriptionId
    })
  };
  const checkboxInput = /*#__PURE__*/_jsx("input", {
    type: "checkbox",
    className: "checkbox",
    id: id,
    checked: isChecked,
    disabled: isDisabled,
    onChange: onChange,
    value: String(isChecked),
    "test-id": `${testSelector}-input`,
    ref: setRef,
    onClick: e => e.stopPropagation(),
    onKeyDown: onKeyDown,
    tabIndex: tabIndex,
    ...checkBoxAttr,
    role: role,
    "aria-checked": indeterminate ? 'mixed' : isChecked
  });
  if (!hasParentTooltip) {
    if (isTruncatable) {
      return /*#__PURE__*/_jsxs("div", {
        className: "checkbox-wrapper",
        children: [checkboxInput, /*#__PURE__*/_jsx(TruncateWithTooltip, {
          tooltipDocsLink: tooltipDocsLink,
          tooltipText: getDefaultTooltipText(),
          tooltipPlacement: tooltipPlacement,
          children: label
        })]
      });
    }
    if (tooltipText) {
      return /*#__PURE__*/_jsx(Tooltip, {
        placement: TOOLTIP_PLACEMENT_TYPES.TOP || tooltipPlacement,
        content: tooltipText,
        children: /*#__PURE__*/_jsxs("div", {
          className: "checkbox-wrapper checkbox-tooltip-container",
          "test-id": "checkbox-tooltip-container",
          children: [checkboxInput, label]
        })
      });
    }
  }
  return /*#__PURE__*/_jsxs("div", {
    className: "checkbox-wrapper",
    children: [checkboxInput, label]
  });
});
Checkbox.displayName = 'Checkbox';
export default Checkbox;