import React, { RefObject, forwardRef, useCallback, useEffect, useRef, useState } from 'react';
import classnames from 'classnames';
import { Button as MdcButton } from '@momentum-design/components/dist/react';
import type { Button, IconButtonSize } from '@momentum-design/components';
import { DEFAULTS } from './ButtonCircleToggle.constants';
import type { Props } from './ButtonCircleToggle.types';

/**
 * @deprecated Use the equivalent from momentum.design (NPM: `@momentum-design/components/dist/react`)
 */
const ButtonCircleToggle = forwardRef((props: Props, providedRef: RefObject<Button>) => {
  const {
    isSelected = DEFAULTS.SELECTED, // controlled
    initialIsSelected = DEFAULTS.SELECTED, // uncontrolled
    className,
    outline = DEFAULTS.OUTLINE,
    size = DEFAULTS.SIZE,
    ...otherProps
  } = props;

  const isControlled = isSelected !== undefined;

  const internalRef = useRef();
  const ref = providedRef || internalRef;
  const [selected, setSelected] = useState(isControlled ? isSelected : initialIsSelected);

  useEffect(() => {
    if (isControlled) {
      setSelected(isSelected);
    }
  }, [isControlled, isSelected]);

  // MdcButton is uncontrolled, so we need to handle the state manually
  const handleToggle = useCallback(() => {
    const newValue = isControlled ? isSelected : !selected;
    if (!isControlled) {
      setSelected(newValue);
    }
    otherProps.onChange?.(newValue); // when the toggle is controlled, onChange is, ironically, the one causing the change of isSelected
  }, [isControlled, isSelected, selected, otherProps]);

  return (
    <MdcButton
      active={selected}
      ref={ref}
      className={classnames(className)}
      size={size as IconButtonSize}
      variant={outline ? 'secondary' : 'tertiary'}
      onClick={handleToggle}
      {...otherProps}
    />
  );
});

ButtonCircleToggle.displayName = 'ButtonCircleToggle';

export default ButtonCircleToggle;