import { observer } from 'mobx-react-lite';
import { useMemo } from 'react';

import { useStores } from '@/app/(root)/AppProviders';
import ImpressionLogger, {
  ImpressionLoggerConfig,
} from '@/components/ImpressionLogger';
import BaseDiscoverHookCard, {
  Props as BaseDiscoverHookCardProps,
} from '@/components/card/DiscoverHookCard';
import { VideoHookEntity } from '@/components/hooksPlayer/useVideoHooks';

type Props = BaseDiscoverHookCardProps & {
  hook: VideoHookEntity;
};

const DiscoverHookCard: React.FC<Props> = observer((props) => {
  const { hook, index, ...restProps } = props;

  const { session } = useStores();

  const impressionLoggerConfig = useMemo<ImpressionLoggerConfig[]>(() => {
    const baseEvent = {
      principalObjectType: 'hook' as const,
      principalObjectValue: hook.id,
      context: {
        title: hook.title || '',
        caption: hook.caption || '',
        artistDisplayName: hook.user?.displayName || '',
        artistHandle: hook.user?.handle || '',

        likeCount: hook.likeCount ?? undefined,
        commentCount: hook.commentCount ?? undefined,
        viewCount: hook.viewCount ?? undefined,
        recommendationItemId: hook.recommendationItemId ?? '',

        index,
      },
    };
    return [
      {
        event: {
          ...baseEvent,
          actionName: 'DiscoverHookCardSeen',
        },
        threshold: 0.95,
      },
      {
        event: {
          ...baseEvent,
          actionName: 'DiscoverHookCardSeenPartially',
        },
        threshold: 0.25,
      },
    ];
  }, [hook, index]);

  const isOwnHook = hook.user?.externalUserId === session.userId;

  return (
    <ImpressionLogger configs={impressionLoggerConfig}>
      <BaseDiscoverHookCard
        hookId={hook.id}
        hookImage={hook.thumbnailImageUrl ?? undefined}
        hookVideo={hook.renderedVideoUrl ?? undefined} // Controls hover preview
        hookTitle={hook.title}
        hookCaption={hook.caption}
        hookArtistAvatar={hook.user?.avatarImageUrl ?? undefined}
        hookArtistDisplayName={hook.user?.displayName ?? undefined}
        hookArtistHandle={hook.user?.handle ?? undefined}
        hookCreatedAt={isOwnHook ? hook.createdAt : undefined}
        hookStatus={hook.status}
        clipTitle={hook.clip?.title ?? undefined}
        clipArtistAvatar={hook.clip?.avatarImageUrl ?? undefined}
        clipArtistDisplayName={hook.clip?.displayName ?? undefined}
        clipArtistHandle={hook.clip?.handle ?? undefined}
        viewCount={hook.viewCount ?? undefined}
        commentCount={hook.commentCount ?? undefined}
        likeCount={hook.likeCount ?? undefined}
        isOwnHook={isOwnHook}
        showViewCount={hook.viewCount >= 10 && (session.isStaff || isOwnHook)}
        index={index}
        recommendationItemId={hook.recommendationItemId ?? ''}
        {...restProps}
      />
    </ImpressionLogger>
  );
});

export default DiscoverHookCard;