import {
  IconButton as MuiIconButton,
  type IconButtonProps as MuiIconButtonProps
} from '@mui/material';

import { forwardRef, type ReactElement, type ReactNode } from 'react';

import type { AriaLabelingAttributes } from '../../../@types/aria-attributes';
import type { DataTestAttributes } from '../../../@types/data-attributes';
import { useStyles } from './IconButton.styles';

const muiColorMap: Record<
  Required<IconButtonProps>['variant'],
  'primary' | 'secondary' | 'default'
> = {
  ghost: 'default',
  primary: 'primary',
  secondary: 'secondary'
};

type IconButtonProps = {
  disabled?: boolean;
  icon?: string | ReactNode;
  onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
  size?: 'small' | 'medium' | 'large';
  variant?: 'primary' | 'secondary' | 'ghost';
} & AriaLabelingAttributes &
  DataTestAttributes &
  MuiIconButtonProps;

/**
 * @todo re-factor as `iconVariant: 'icon-only'` Button variant, and remove IconButton component (reason: code duplication)
 */
const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
  (
    {
      variant = 'primary',
      size = 'medium',
      icon,
      disabled = false,
      onClick,
      ...attr
    },
    ref
  ): ReactElement => {
    const { classes } = useStyles();

    return (
      <MuiIconButton
        className={classes.iconButton}
        data-size={size}
        data-variant={variant}
        disabled={disabled}
        onClick={(e) => onClick?.(e)}
        ref={ref}
        size={size}
        {...attr}
        // Mui overrides
        color={muiColorMap[variant]}
      >
        {icon}
      </MuiIconButton>
    );
  }
);
export { IconButton };