import { ShareAssetType } from '@/api/asset_interfaces';
import { AppTooltip } from '@/components/ui/tooltip';
import React, { useMemo } from 'react';
import { useMemoizedFn } from '@/hooks';
import { Button } from '@/components/ui/buttons';
import { cn } from '@/lib/classMerge';
import { Star } from '@/components/ui/icons';
import { Star as StarFilled } from '@/components/ui/icons/NucleoIconFilled';
import { cva } from 'class-variance-authority';
import {
  useAddUserFavorite,
  useDeleteUserFavorite,
  useGetUserFavorites
} from '@/api/buster_rest/users';

const favoriteStarVariants = cva('transition-colors', {
  variants: {
    variant: {
      default: 'text-icon-color hover:text-foreground',
      tertiary: 'text-text-tertiary hover:text-icon-color'
    },
    isFavorited: {
      true: 'text-yellow-500! hover:text-yellow-500!',
      false: ''
    }
  },
  defaultVariants: {
    variant: 'default',
    isFavorited: false
  }
});

export const FavoriteStar: React.FC<{
  id: string;
  type: ShareAssetType;
  title: string;
  className?: string;
  iconStyle?: 'default' | 'tertiary';
}> = React.memo(({ title: name, id, type, className = '', iconStyle = 'default' }) => {
  const { isFavorited, onFavoriteClick } = useFavoriteStar({ id, type, name });

  const tooltipText = isFavorited ? 'Remove from favorites' : 'Add to favorites';

  return (
    <AppTooltip title={tooltipText} key={tooltipText}>
      <Button
        className={cn('flex transition-none', isFavorited && 'opacity-100!', className)}
        onClick={onFavoriteClick}
        variant="ghost"
        prefix={
          <div
            className={cn(
              favoriteStarVariants({
                variant: iconStyle === 'tertiary' ? 'tertiary' : 'default',
                isFavorited
              })
            )}>
            {isFavorited ? <StarFilled /> : <Star />}
          </div>
        }
      />
    </AppTooltip>
  );
});
FavoriteStar.displayName = 'FavoriteStar';

export const useFavoriteStar = ({
  id,
  type,
  name
}: {
  id: string;
  type: ShareAssetType;
  name: string;
}) => {
  const { data: userFavorites } = useGetUserFavorites();
  const { mutateAsync: removeItemFromFavorite } = useDeleteUserFavorite();
  const { mutateAsync: addItemToFavorite } = useAddUserFavorite();

  const isFavorited = useMemo(() => {
    return userFavorites?.some((favorite) => favorite.id === id || favorite.collection_id === id);
  }, [userFavorites, id]);

  console.log('userFavorites', isFavorited, userFavorites);

  const onFavoriteClick = useMemoizedFn(async (e?: React.MouseEvent<HTMLButtonElement>) => {
    e?.stopPropagation();
    e?.preventDefault();
    if (!isFavorited)
      return await addItemToFavorite({
        asset_type: type,
        id,
        name
      });
    await removeItemFromFavorite(id);
  });

  return useMemo(
    () => ({
      isFavorited,
      onFavoriteClick
    }),
    [isFavorited, onFavoriteClick]
  );
};