'use client';

/* eslint jsx-a11y/click-events-have-key-events: warn */

/* eslint jsx-a11y/no-static-element-interactions: warn */
import { useRouter } from 'next/navigation';

import { useStores } from '@/app/(root)/AppProviders';
import Button, { ButtonVariant } from '@/components/button/Button';
import PersonaCard from '@/components/card/PersonaCard';
import { Tooltip } from '@/components/tooltip/Tooltip';
import { ContextType } from '@/logging/contextTypes';
import logWebUserEvent from '@/logging/logWebUserEvent';
import { Clip } from '@/state/clipStore';
import { PlanFeature } from '@/state/sessionStore';
import { CAROUSEL_ITEM_GAP_MULTIPLIER } from '@/utils/constants';
import { isFeatureEnabledForPlan } from '@/utils/session';

export const PersonaCardItem = ({
  index,
  style,
  data,
}: {
  index: number;
  style: any;
  data: any;
}) => {
  const { elements } = data;
  const persona = elements[index];
  const router = useRouter();
  const { genForm, queue, playbar, clips, session } = useStores();

  return (
    <div
      style={{
        ...style,
        left:
          index === 0 ? style.left : style.left * CAROUSEL_ITEM_GAP_MULTIPLIER,
        height: 'fit-content',
      }}
      onClick={() => {
        logWebUserEvent({
          actionName: 'PersonaCardClicked',
          context: {
            personaId: persona?.id,
            index: index,
          },
        });
      }}
    >
      <div key={persona.id} className='flex flex-col gap-2'>
        <PersonaCard
          id={persona.id}
          name={persona.name}
          image_url={persona.image_s3_id}
          user_image_url={persona.user_image_url}
          user_display_name={persona.user_display_name}
          user_handle={persona.user_handle}
          root_clip_id={persona.root_clip_id}
        />
        <div className='flex w-full gap-2 pl-6'>
          <Tooltip
            color={'white'}
            background={'#333333'}
            label={
              !isFeatureEnabledForPlan(session, PlanFeature.Persona)
                ? 'Subscribe to create with this Persona'
                : ''
            }
          >
            <Button
              className='flex-1'
              onClick={() => {
                if (!isFeatureEnabledForPlan(session, PlanFeature.Persona)) {
                  return;
                }
                router.push('/create');
                genForm.setPersona(persona.id);
                const rootClipStyles =
                  clips.clipById[persona.root_clip_id]?.metadata?.tags || '';
                genForm.setStyle(rootClipStyles);
              }}
              variant={ButtonVariant.Primary}
              disabled={!isFeatureEnabledForPlan(session, PlanFeature.Persona)}
            >
              Create
            </Button>
          </Tooltip>
          <Button
            className='flex-1'
            onClick={async () => {
              if (!persona.root_clip_id) return;

              const clipToPlay = (await clips.loadClipById(
                persona.root_clip_id
              )) as Clip;
              if (!clipToPlay) {
                return;
              }

              clips.clipById[clipToPlay.id] = clipToPlay;
              clips.updateClips([clipToPlay]);

              if (playbar.clip?.id === persona.root_clip_id) {
                playbar.togglePlay();
              } else {
                queue.setPlayContext({
                  clips: [clipToPlay],
                  contextId: persona.id,
                  currentIndex: 0,
                  contextType: ContextType.Persona,
                });
                playbar.playClip(clipToPlay);
              }
            }}
          >
            Listen
          </Button>
        </div>
      </div>
    </div>
  );
};