import { ActionIcon, type ActionIconProps, Tooltip, VisuallyHidden } from '@mantine/core';
import { useState } from 'react';

import type { SpecialIDProps } from '../FormerControllers.types';

const IconButtonCtrl = (
  props: {
    onClick?: (e?: React.MouseEvent<HTMLButtonElement, MouseEvent>) => Promise<void>;
  } & Omit<ActionIconProps, 'onClick'> &
    SpecialIDProps
) => {
  const [loading, setLoading] = useState(false);
  return (
    <Tooltip label={props.tooltip ?? ''} withArrow>
      <ActionIcon
        loaderProps={{
          type: 'bars',
        }}
        {...props}
        loading={loading || props.loading}
        onClick={(e) => {
          if (props.onClick) {
            setLoading(true);
            props.onClick(e).finally(() => setLoading(false));
          }
        }}
      >
        {props.children}
        <VisuallyHidden>Action Button: {props.tooltip ?? props.sid ?? ''}</VisuallyHidden>
      </ActionIcon>
    </Tooltip>
  );
};

export { IconButtonCtrl };
export default IconButtonCtrl;