import { Button, type ButtonProps, Tooltip } from '@mantine/core';
import { useState } from 'react';

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

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

export { ButtonCtrl };
export default ButtonCtrl;