'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var clsx = require('clsx');
var React = require('react');
var Body = require('../body/Body.js');
require('../common/theme.js');
require('../common/direction.js');
require('@transferwise/neptune-tokens');
require('../common/propsValues/control.js');
require('../common/propsValues/size.js');
var typography = require('../common/propsValues/typography.js');
require('../common/propsValues/width.js');
require('../common/propsValues/type.js');
require('../common/propsValues/dateMode.js');
require('../common/propsValues/monthFormat.js');
require('../common/propsValues/position.js');
require('../common/propsValues/layouts.js');
require('../common/propsValues/status.js');
require('../common/propsValues/sentiment.js');
require('../common/propsValues/profileType.js');
require('../common/propsValues/variant.js');
require('../common/propsValues/scroll.js');
require('../common/propsValues/markdownNodeType.js');
require('../common/fileType.js');
require('@transferwise/formatting');
require('@transferwise/icons');
require('react-intl');
require('../common/closeButton/CloseButton.messages.js');
var jsxRuntime = require('react/jsx-runtime');

const SegmentedControl = ({
  name,
  value,
  mode = 'input',
  segments,
  onChange
}) => {
  const isMountedRef = React.useRef(false);
  const [animate, setAnimate] = React.useState(false);
  const segmentsRef = React.useRef(null);
  if (segments.length > 3) {
    throw new Error('SegmentedControl only supports up to 3 segments. Please refer to: https://docs.wise.design/components/segmented-control');
  }
  const segmentsWithRefs = segments.map(segment => ({
    ...segment,
    ref: /*#__PURE__*/React.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`);
    }
  };
  React.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__*/jsxRuntime.jsx("div", {
    ref: segmentsRef,
    "data-testid": "segmented-control",
    className: clsx.clsx('segmented-control', {
      'segmented-control--input': mode === 'input'
    }),
    children: /*#__PURE__*/jsxRuntime.jsx("div", {
      className: clsx.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__*/jsxRuntime.jsxs("label", {
          ref: segment.ref,
          htmlFor: segment.id,
          className: clsx.clsx('segmented-control__segment', {
            'segmented-control__selected-segment': value === segment.value
          }),
          children: [/*#__PURE__*/jsxRuntime.jsx("input", {
            type: "radio",
            className: "segmented-control__radio-input",
            id: segment.id,
            name: name,
            value: segment.value,
            checked: value === segment.value,
            onChange: onSelect
          }), /*#__PURE__*/jsxRuntime.jsx(Body.default, {
            className: "segmented-control__text",
            as: "span",
            type: value === segment.value ? typography.Typography.BODY_DEFAULT_BOLD : typography.Typography.BODY_DEFAULT,
            children: segment.label
          })]
        }, segment.id) : /*#__PURE__*/jsxRuntime.jsx("button", {
          ref: segment.ref,
          type: "button",
          role: "tab",
          id: segment.id,
          "aria-controls": segment.controls,
          "aria-selected": value === segment.value,
          className: clsx.clsx('segmented-control__segment', 'segmented-control__button', {
            'segmented-control__selected-segment': value === segment.value
          }),
          onClick: onSelect,
          children: /*#__PURE__*/jsxRuntime.jsx(Body.default, {
            as: "span",
            className: "segmented-control__text",
            type: value === segment.value ? typography.Typography.BODY_DEFAULT_BOLD : typography.Typography.BODY_DEFAULT,
            children: segment.label
          })
        }, segment.id);
      })
    })
  });
};

exports.default = SegmentedControl;
//# sourceMappingURL=SegmentedControl.js.map
