import React, { useEffect } from 'react';
import { twMerge } from 'tailwind-merge';

import { useStores } from '@/app/(root)/AppProviders';
import DiscoverContestCardActions from '@/components/carousel/carouselCards/DiscoverContestCardActions';
import DiscoverContestCardDescription from '@/components/carousel/carouselCards/DiscoverContestCardDescription';
import DiscoverContestCardLabels from '@/components/carousel/carouselCards/DiscoverContestCardLabels';
import DiscoverContestCardTitle from '@/components/carousel/carouselCards/DiscoverContestCardTitle';
import DiscoverSongCard from '@/components/carousel/carouselCards/DiscoverSongCard';
import { useBreakpointMd } from '@/hooks/useBreakpoint';
import { ContextType } from '@/logging/contextTypes';
import { ClipEntity } from '@/state/clipStore';

import { ContestSectionVisibility } from '../contest/util';

export type Props = React.HTMLAttributes<HTMLDivElement> & {
  contestId: string;
  contestName: string;
  contestCategory?: string;
  contestDescription?: string;
  startTime?: string;
  endTime?: string;
  judgingStart?: string;
  judgingEnd?: string;
  winnersAnnouncedDate?: string;
  winnersPlaylistId?: string;
  submissionsPlaylistId?: string;
  index?: number;
  contestClip?: ClipEntity;
  contestSlug?: string;
  contestVisibility?: ContestSectionVisibility;
  onRemixClick?: () => void;
  onRequirementsClick?: () => void;
};

const BaseDiscoverContestCard: React.FC<Props> = ({
  className,
  contestId,
  contestName,
  contestCategory,
  contestDescription,
  startTime,
  endTime,
  judgingStart,
  judgingEnd,
  winnersAnnouncedDate,
  winnersPlaylistId,
  submissionsPlaylistId,
  contestClip,
  index,
  contestSlug,
  contestVisibility,
  onRemixClick,
  onRequirementsClick,
  ...restProps
}) => {
  const { clips } = useStores();
  const isMobile = !useBreakpointMd();

  // Update clips store with contest clip so it can be played
  useEffect(() => {
    if (contestClip) {
      clips.updateClipsFromEntities([contestClip]);
    }
  }, [contestClip, clips]);

  return (
    <div
      className={twMerge(
        'flex h-[208px] w-[563px] flex-col rounded-[20px] bg-background-fog-thin px-[12px] py-[15px]',
        isMobile ? 'h-[200px]' : 'h-[208px]',
        className
      )}
      {...restProps}
    >
      <DiscoverContestCardLabels
        contestCategory={contestCategory}
        startTime={startTime}
        endTime={endTime}
        judgingStart={judgingStart}
        judgingEnd={judgingEnd}
        winnersAnnouncedDate={winnersAnnouncedDate}
        winnersPlaylistId={winnersPlaylistId}
        contestVisibility={contestVisibility}
      />

      <div className='mt-2 flex flex-1 items-center gap-4'>
        {contestClip && (
          <div>
            <DiscoverSongCard
              clip={{
                ...(contestClip as unknown as ClipEntity),
                imageUrl: contestClip?.imageUrl,
              }}
              index={index || 0}
              className={twMerge(
                'h-[140px] w-[140px] border-none',
                isMobile ? 'h-[100px] w-[100px]' : 'h-[140px] w-[140px]'
              )}
              contextType={ContextType.Contest}
              contextId={contestId}
              contestCard={true}
            />
          </div>
        )}

        <div className='flex flex-1 flex-col justify-center'>
          <DiscoverContestCardTitle
            contestName={contestName}
            contestClip={contestClip}
            startTime={startTime}
            endTime={endTime}
            winnersAnnouncedDate={winnersAnnouncedDate}
            winnersPlaylistId={winnersPlaylistId}
            isMobile={isMobile}
          />

          <DiscoverContestCardDescription
            contestDescription={contestDescription}
            contestClip={contestClip}
            startTime={startTime}
            endTime={endTime}
            winnersAnnouncedDate={winnersAnnouncedDate}
            winnersPlaylistId={winnersPlaylistId}
          />

          <DiscoverContestCardActions
            contestId={contestId}
            contestSlug={contestSlug}
            startTime={startTime}
            endTime={endTime}
            judgingStart={judgingStart}
            judgingEnd={judgingEnd}
            winnersAnnouncedDate={winnersAnnouncedDate}
            winnersPlaylistId={winnersPlaylistId}
            submissionsPlaylistId={submissionsPlaylistId}
            contestClip={contestClip}
            onRemixClick={onRemixClick}
            onRequirementsClick={onRequirementsClick}
            index={index}
          />
        </div>
      </div>
    </div>
  );
};

export default BaseDiscoverContestCard;