import { clsx } from 'clsx';
import { cloneElement } from 'react';

import Body from '../body/Body';
import { typeClassMap, priorityClassMap } from '../button/classMap';
import { Breakpoint, ControlType, Priority, Typography } from '../common';
import Circle from '../common/circle';
import { useMedia } from '../common/hooks/useMedia';

export interface CircularButtonProps {
  className?: string;
  children: string;
  disabled?: boolean;
  icon: React.ReactElement<{ size?: unknown }>;
  onClick?: React.MouseEventHandler<HTMLInputElement>;
  priority?: `${Priority.PRIMARY | Priority.SECONDARY}`;
  type?: `${ControlType.ACCENT | ControlType.POSITIVE | ControlType.NEGATIVE}`;
}

const CircularButton = ({
  className,
  children,
  disabled,
  icon,
  priority = Priority.PRIMARY,
  type = ControlType.ACCENT,
  ...rest
}: CircularButtonProps) => {
  const classes = clsx('btn np-btn', 'm-b-1', typeClassMap[type], priorityClassMap[priority]);

  const iconElement = Number(icon.props.size) !== 24 ? cloneElement(icon, { size: 24 }) : icon;

  const isTinyViewport = useMedia(`(max-width: ${Breakpoint.ZOOM_400}px)`);

  return (
    <label className={clsx('np-circular-btn', priority, type, disabled && 'disabled', className)}>
      <Circle
        as="input"
        // @ts-expect-error it's input[type=button] element
        type="button"
        size={isTinyViewport ? 72 : 56}
        aria-label={children}
        className={classes}
        disabled={disabled}
        {...rest}
      />
      {iconElement}
      <Body as="span" className="np-circular-btn__label" type={Typography.BODY_DEFAULT_BOLD}>
        {children}
      </Body>
    </label>
  );
};

export default CircularButton;
