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

import ImpressionLogger, {
  ImpressionLoggerConfig,
} from '@/components/ImpressionLogger';
import BaseDiscoverContestCard, {
  Props as BaseDiscoverContestCardProps,
} from '@/components/card/BaseDiscoverContestCard';
import { getContestVisibilityLevel } from '@/components/contest/util';
import usePlaySourceContext from '@/hooks/usePlaySource';
import { DiscoverSectionItemEntity } from '@/state/discoverStore';

type ContestEntity = DiscoverSectionItemEntity<'contest_list'>;

type Props = Omit<BaseDiscoverContestCardProps, 'contestId' | 'contestName'> & {
  contest: ContestEntity;
  index?: number;
};

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

  const playSource = usePlaySourceContext();

  const impressionLoggerConfig = useMemo<ImpressionLoggerConfig[]>(() => {
    const baseEvent = {
      principalObjectType: 'contest' as const,
      principalObjectValue: contest.id,
      context: {
        contestName: contest.name,
        contestDescription: contest.description || '',
        startTime: contest.startTime || '',
        endTime: contest.endTime || '',
        judgingStart: contest.judgingStart || '',
        judgingEnd: contest.judgingEnd || '',
        winnersAnnouncedDate: contest.winnersAnnouncedDate || '',
        playSourceType: playSource.playSourceType,
        playSourceId: playSource.playSourceId,
        index,
      },
    };

    return [
      {
        event: {
          ...baseEvent,
          actionName: 'DiscoverContestCardSeen',
        },
        threshold: 0.95,
      },
      {
        event: {
          ...baseEvent,
          actionName: 'DiscoverContestCardSeenPartially',
        },
        threshold: 0.25,
      },
    ];
  }, [contest, playSource, index]);

  return (
    <ImpressionLogger configs={impressionLoggerConfig}>
      <BaseDiscoverContestCard
        contestId={contest.id}
        contestName={contest.name}
        contestCategory={contest.contestCategory || undefined}
        contestDescription={contest.description}
        startTime={contest.startTime || undefined}
        endTime={contest.endTime || undefined}
        judgingStart={contest.judgingStart || undefined}
        judgingEnd={contest.judgingEnd || undefined}
        winnersAnnouncedDate={contest.winnersAnnouncedDate || undefined}
        winnersPlaylistId={contest.winnersPlaylistId || undefined}
        submissionsPlaylistId={contest.submissionsPlaylistId || undefined}
        contestClip={contest.contestClip}
        contestSlug={contest.slug || undefined}
        index={index}
        contestVisibility={getContestVisibilityLevel(
          contest.contestVisibilityLevel
        )}
        {...restProps}
      />
    </ImpressionLogger>
  );
});

export default DiscoverContestCard;