import clsx from 'clsx';
import { deepCamelKeys } from 'string-ts';

import {
  ContestCardSkeleton,
  HookCardSkeleton,
} from '@/components/carousel/carousels/SkeletonCarousel';
import FeaturedFeed from '@/components/feed/FeaturedFeed';
import DynamicBanner from '@/components/promos/DynamicBanner';
import { ShortcutRowSection } from '@/components/shortcuts/ShortcutRowSection';
import { ContextType } from '@/logging/contextTypes';
import { Clip } from '@/state/clipStore';
import { DiscoverSection, SectionType } from '@/state/discoverStore';
import { PlayContext } from '@/state/queueStore';

import DiscoverContestCard from '../carouselCards/DiscoverContestCard';
import DiscoverHookCard from '../carouselCards/DiscoverHookCard';
import DiscoverPlaylistCard from '../carouselCards/DiscoverPlaylistCard';
import DiscoverSongCard from '../carouselCards/DiscoverSongCard';
import ContentCarousel from './ContentCarousel';
import DiscoverCardCarousel, {
  DiscoverCardCarouselRenderItem,
} from './DiscoverCardCarousel';

export enum StyleType {
  Featured = 'featured',
}

export type Props = {
  index: number;
  section: DiscoverSection;
  styleType?: StyleType | string;
  sectionType?: SectionType | string;
};

const renderDiscoverPlaylistCard: DiscoverCardCarouselRenderItem<
  'playlist_list'
> = ({ item, ...restProps }) => (
  <div key={item.id}>
    <DiscoverPlaylistCard playlist={item} {...restProps} />
  </div>
);

const renderDiscoverSongCard: DiscoverCardCarouselRenderItem<
  'playlist',
  {
    contextId?: PlayContext['contextId'];
    contextType?: PlayContext['contextType'];
    allItems?: Clip[];
  }
> = ({ item, ...restProps }) => {
  return (
    <div key={item.id}>
      <DiscoverSongCard clip={item} {...restProps} />
    </div>
  );
};

const renderDiscoverHookCard: DiscoverCardCarouselRenderItem<'hooks'> = ({
  item,
  ...restProps
}) => {
  return (
    <div key={item.id}>
      <DiscoverHookCard hook={item} {...restProps} />
    </div>
  );
};

const renderDiscoverContestCard: DiscoverCardCarouselRenderItem<
  'contest_list'
> = ({ item, ...restProps }) => {
  return (
    <div key={item.id}>
      <DiscoverContestCard contest={item} {...restProps} />
    </div>
  );
};

/**
 * Component that routes to different carousel elements based on the type that we want to render
 */
export const DiscoverSectionWrapper: React.FC<Props> = (props) => {
  const { section, index, styleType = section.style_type } = props;

  switch (true) {
    case section.section_type === SectionType.Banner:
      return (
        <DynamicBanner section={deepCamelKeys(section)} className='mb-4' />
      );
    case styleType === StyleType.Featured &&
      section.section_type === SectionType.PlaylistList:
      return (
        <DiscoverCardCarousel
          index={index}
          className='mb-4'
          headerClassName={clsx('md:min-h-12', { 'md:-mt-16': index === 0 })}
          id={section.id}
          name={section.section_name}
          title={section.title}
          description={section.description || undefined}
          items={deepCamelKeys(section.items)}
          sectionType={section.section_type}
          styleType={section.style_type ?? undefined}
          link={section.link || undefined}
          renderItem={renderDiscoverPlaylistCard}
          carouselEventData={{
            principalObjectType: section.section_type || '',
            principalObjectValue: section.section_name || '',
            context: {
              sectionLink: section.link,
              selectedContentOption: section.selected_option,
              selectedSecondaryOption: section.secondary_selected_option,
              carouselIndex: index,
              carouselTitle: section.title,
            },
          }}
        />
      );
    case styleType === StyleType.Featured &&
      section.section_type === SectionType.Playlist:
      return (
        <DiscoverCardCarousel
          index={index}
          className='mb-4'
          headerClassName={clsx('md:min-h-12', { 'md:-mt-16': index === 0 })}
          id={section.id}
          name={section.section_name}
          title={section.title}
          description={section.description || undefined}
          items={deepCamelKeys(section.items)}
          sectionType={section.section_type}
          styleType={section.style_type ?? undefined}
          link={section.link || undefined}
          renderItem={renderDiscoverSongCard}
          renderItemProps={{
            contextId: section.id || 'content_carousel_missing_section_id',
            contextType: ContextType.DiscoverCarousel,
            allItems: section.items,
          }}
          carouselEventData={{
            principalObjectType: section.section_type || '',
            principalObjectValue: section.section_name || '',
            context: {
              sectionLink: section.link,
              selectedContentOption: section.selected_option,
              selectedSecondaryOption: section.secondary_selected_option,
              carouselIndex: index,
              carouselTitle: section.title,
            },
          }}
        />
      );
    case section.section_type === SectionType.Hooks:
      return (
        <DiscoverCardCarousel
          index={index}
          className='mb-4'
          headerClassName={clsx('md:min-h-12', { 'md:-mt-16': index === 0 })}
          id={section.id}
          name={section.section_name}
          title={section.title}
          description={section.description || undefined}
          items={deepCamelKeys(section.items)}
          sectionType={section.section_type}
          styleType={section.style_type ?? undefined}
          link={section.link || undefined}
          renderItem={renderDiscoverHookCard}
          renderSkeleton={() => <HookCardSkeleton />}
          skeletonCount={15}
          // renderItemProps={{
          //   contextId: section.id || 'content_carousel_missing_section_id',
          //   contextType: ContextType.DiscoverCarousel,
          //   allItems: section.items,
          // }}
          carouselEventData={{
            principalObjectType: section.section_type || '',
            principalObjectValue: section.section_name || '',
            context: {
              sectionLink: section.link,
              selectedContentOption: section.selected_option,
              selectedSecondaryOption: section.secondary_selected_option,
              carouselIndex: index,
              carouselTitle: section.title,
            },
          }}
        />
      );
    case section.section_type === SectionType.ContestList:
      return (
        <DiscoverCardCarousel
          index={index}
          className='mb-4'
          headerClassName={clsx('md:min-h-12', { 'md:-mt-16': index === 0 })}
          id={section.id}
          name={section.section_name}
          title={section.title}
          description={section.description || undefined}
          items={deepCamelKeys(section.items)}
          sectionType={section.section_type}
          styleType={section.style_type ?? undefined}
          link={section.link || undefined}
          renderItem={renderDiscoverContestCard}
          renderSkeleton={() => <ContestCardSkeleton />}
          carouselEventData={{
            principalObjectType: section.section_type || '',
            principalObjectValue: section.section_name || '',
            context: {
              sectionLink: section.link,
              selectedContentOption: section.selected_option,
              selectedSecondaryOption: section.secondary_selected_option,
              carouselIndex: index,
              carouselTitle: section.title,
            },
          }}
        />
      );
    case section.section_type === SectionType.FeaturedFeed:
      return <FeaturedFeed feedItemLists={section.items} />;
    case section.section_type === SectionType.Shortcut:
      return (
        <ShortcutRowSection
          title={section.title}
          items={section.items}
          className='mb-8'
        />
      );
    default:
      return (
        <ContentCarousel
          index={index}
          sectionId={section.id}
          sectionTitle={section.title}
          elements={section.items}
          sectionType={section.section_type || ''}
          styleType={section.style_type || ''}
          sectionLink={section.link ?? undefined}
          options={section.options ?? undefined}
          sectionName={section.section_name || ''}
          selectedOption={section.selected_option ?? undefined}
          secondaryOptions={section.secondary_options ?? undefined}
          selectedSecondaryOption={
            section.secondary_selected_option ?? undefined
          }
        />
      );
  }
};

export default DiscoverSectionWrapper;