import {Button, ButtonProps} from '@common/ui/buttons/button';
import {useAuth} from '@common/auth/use-auth';
import {User} from '@common/auth/user';
import {useIsUserFollowing} from '@common/users/queries/use-followed-users';
import {useFollowUser} from '@common/users/queries/use-follow-user';
import {useUnfollowUser} from '@common/users/queries/use-unfollow-user';
import {Trans} from '@common/i18n/trans';
import clsx from 'clsx';

interface Props extends Omit<ButtonProps, 'onClick' | 'disabled'> {
  user: User;
  minWidth?: string | null;
}
export function FollowButton({
  user,
  className,
  minWidth = 'min-w-82',
  ...buttonProps
}: Props) {
  const {user: currentUser} = useAuth();
  const {isFollowing, isLoading} = useIsUserFollowing(user);
  const followUser = useFollowUser();
  const unfollowUser = useUnfollowUser();

  const mergedClassName = clsx(className, minWidth);

  if (isFollowing) {
    return (
      <Button
        {...buttonProps}
        className={mergedClassName}
        onClick={() => unfollowUser.mutate({user})}
        disabled={
          !currentUser ||
          currentUser?.id === user.id ||
          unfollowUser.isPending ||
          isLoading
        }
      >
        <Trans message="Unfollow" />
      </Button>
    );
  }

  return (
    <Button
      {...buttonProps}
      className={mergedClassName}
      onClick={() => followUser.mutate({user})}
      disabled={
        !currentUser ||
        currentUser?.id === user.id ||
        followUser.isPending ||
        isLoading
      }
    >
      <Trans message="Follow" />
    </Button>
  );
}