import { clsx } from 'clsx';
import { Breakpoint } from '@transferwise/neptune-tokens';

import Body from '../body/Body';
import { ControlType, Priority, Typography } from '../common';
import IconButton, { IconButtonProps } from '../iconButton';
import { useMedia } from '../common/hooks/useMedia';

/**
 * @deprecated Use `'default'` instead.
 */
type DeprecatedTypes = `${ControlType.ACCENT | ControlType.POSITIVE}`;

export interface CircularButtonProps {
  className?: string;
  children: string;
  disabled?: boolean;
  icon: React.ReactElement<{ size?: unknown }> | React.ReactNode;
  onClick?: React.MouseEventHandler<HTMLInputElement> &
    React.MouseEventHandler<HTMLButtonElement> &
    React.MouseEventHandler<HTMLAnchorElement>;
  priority?: `${Priority.PRIMARY | Priority.SECONDARY}`;
  /**
   * `"accent"` and `"positive"` values are **deprecated**, please use `"default"` instead
   */
  type?: DeprecatedTypes | 'default' | `${ControlType.NEGATIVE}`;
}

const CircularButton = ({
  className,
  children,
  disabled,
  icon,
  onClick,
  priority = Priority.PRIMARY,
  type = 'default',
}: CircularButtonProps) => {
  const isTinyViewport = useMedia(`(max-width: ${Breakpoint.EXTRA_SMALL}px)`);
  return (
    <label
      className={clsx(
        'np-circular-btn',
        `np-circular-btn-${priority}-${type}`,
        { 'np-circular-btn-disabled': disabled },
        className,
      )}
    >
      <IconButton
        size={isTinyViewport ? 32 : 56}
        priority={priority}
        type={['accent', 'positive'].includes(type) ? 'default' : (type as IconButtonProps['type'])}
        className={clsx('m-b-1')}
        disabled={disabled}
        onClick={onClick}
      >
        {icon}
      </IconButton>
      <Body
        as="span"
        className={clsx('np-circular-btn-label', { disabled })}
        type={Typography.BODY_DEFAULT_BOLD}
      >
        {children}
      </Body>
    </label>
  );
};

export default CircularButton;
