import { clsx } from 'clsx';
import { useRef, useState, createRef, useEffect } from 'react';
import Body from '../body/Body.mjs';
import '../common/theme.mjs';
import '../common/direction.mjs';
import '@transferwise/neptune-tokens';
import '../common/propsValues/control.mjs';
import '../common/propsValues/size.mjs';
import { Typography } from '../common/propsValues/typography.mjs';
import '../common/propsValues/width.mjs';
import '../common/propsValues/type.mjs';
import '../common/propsValues/dateMode.mjs';
import '../common/propsValues/monthFormat.mjs';
import '../common/propsValues/position.mjs';
import '../common/propsValues/layouts.mjs';
import '../common/propsValues/status.mjs';
import '../common/propsValues/sentiment.mjs';
import '../common/propsValues/profileType.mjs';
import '../common/propsValues/variant.mjs';
import '../common/propsValues/scroll.mjs';
import '../common/propsValues/markdownNodeType.mjs';
import '../common/fileType.mjs';
import '@transferwise/formatting';
import '@transferwise/icons';
import 'react-intl';
import '../common/closeButton/CloseButton.messages.mjs';
import { jsx, jsxs } from 'react/jsx-runtime';

const SegmentedControl = ({
  name,
  value,
  mode = 'input',
  segments,
  onChange
}) => {
  const isMountedRef = useRef(false);
  const [animate, setAnimate] = useState(false);
  const segmentsRef = useRef(null);
  if (segments.length > 3) {
    throw new Error('SegmentedControl only supports up to 3 segments. Please refer to: https://wise.design/components/segmented-control');
  }
  const segmentsWithRefs = segments.map(segment => ({
    ...segment,
    ref: /*#__PURE__*/createRef()
  }));
  const updateSegmentPosition = () => {
    const selectedSegmentRef = segmentsWithRefs.find(segment => segment.value === value)?.ref;
    // We grab the active segments style object from the ref
    // and set the css variables to the selected segments width and x position.
    // This is so we can animate the highlight to the selected segment
    if (selectedSegmentRef?.current && segmentsRef.current) {
      const {
        style
      } = segmentsRef.current;
      style.setProperty('--segment-highlight-width', `${selectedSegmentRef.current.offsetWidth}px`);
      style.setProperty('--segment-highlight-x', `${selectedSegmentRef.current.offsetLeft}px`);
    }
  };
  useEffect(() => {
    if (isMountedRef.current) {
      setAnimate(true);
    } else {
      isMountedRef.current = true;
    }
    updateSegmentPosition();
    const handleWindowSizeChange = () => {
      setAnimate(false);
      updateSegmentPosition();
    };
    window.addEventListener('resize', handleWindowSizeChange);
    return () => {
      window.removeEventListener('resize', handleWindowSizeChange);
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [segmentsWithRefs, value]);
  return /*#__PURE__*/jsx("div", {
    ref: segmentsRef,
    "data-testid": "segmented-control",
    className: clsx('segmented-control', {
      'segmented-control--input': mode === 'input'
    }),
    children: /*#__PURE__*/jsx("div", {
      className: clsx('segmented-control__segments', {
        'segmented-control__segments--no-animate': !animate
      }),
      role: mode !== 'input' ? 'tablist' : undefined,
      children: segmentsWithRefs.map(segment => {
        const onSelect = () => {
          setAnimate(true);
          onChange(segment.value);
        };
        return mode === 'input' ? /*#__PURE__*/jsxs("label", {
          ref: segment.ref,
          htmlFor: segment.id,
          className: clsx('segmented-control__segment', {
            'segmented-control__selected-segment': value === segment.value
          }),
          children: [/*#__PURE__*/jsx("input", {
            type: "radio",
            className: "segmented-control__radio-input",
            id: segment.id,
            name: name,
            value: segment.value,
            checked: value === segment.value,
            onChange: onSelect
          }), /*#__PURE__*/jsx(Body, {
            className: "segmented-control__text",
            as: "span",
            type: value === segment.value ? Typography.BODY_DEFAULT_BOLD : Typography.BODY_DEFAULT,
            children: segment.label
          })]
        }, segment.id) : /*#__PURE__*/jsx("button", {
          ref: segment.ref,
          type: "button",
          role: "tab",
          id: segment.id,
          "aria-controls": segment.controls,
          "aria-selected": value === segment.value,
          className: clsx('segmented-control__segment', 'segmented-control__button', {
            'segmented-control__selected-segment': value === segment.value
          }),
          onClick: onSelect,
          children: /*#__PURE__*/jsx(Body, {
            as: "span",
            className: "segmented-control__text",
            type: value === segment.value ? Typography.BODY_DEFAULT_BOLD : Typography.BODY_DEFAULT,
            children: segment.label
          })
        }, segment.id);
      })
    })
  });
};

export { SegmentedControl as default };
//# sourceMappingURL=SegmentedControl.mjs.map
