'use client';

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

/* eslint jsx-a11y/no-static-element-interactions: warn */
import { useEffect, useState } from 'react';
import { useInView } from 'react-intersection-observer';

import { useStores } from '@/app/(root)/AppProviders';
import { useModalContext } from '@/context/ModalContext';
import { useLibrary } from '@/hooks/useLibrary';
import { Clip } from '@/state/clipStore';
import { PlanFeature } from '@/state/sessionStore';
import { isFeatureEnabledForPlan } from '@/utils/session';
import { encodeTimeFormat } from '@/utils/utils';

import ImageWithFallback from '../image/ImageWithFallback';
import SpinnerSVG from '../svg/SpinnerSVG';
import Modal from './Modal';
import { ModalTypes } from './constants/ModalTypes';

const ClipRow = ({ clip, onClick }: { clip: Clip; onClick: () => void }) => {
  return (
    <div
      className='flex w-full cursor-pointer flex-row items-center gap-2 rounded-xl bg-background-secondary p-4 hover:bg-background-tertiary'
      onClick={onClick}
    >
      <div className='h-8 w-6 overflow-hidden rounded-[10px]'>
        <ImageWithFallback
          src={clip.image_url}
          alt={`Image for ${clip.title}`}
          className='object-fit h-full'
        />
      </div>
      <span className='font-medium'>{clip.title}</span>
      <div className='flex flex-1 flex-row-reverse'>
        {encodeTimeFormat(clip.metadata?.duration)}
      </div>
    </div>
  );
};

const LibrarySelectModal: React.FC = () => {
  const { genForm, session, createV2, clips } = useStores();
  const { closeModal } = useModalContext();
  const { error, loadNextPage } = useLibrary({
    filters: { isUpload: true },
  });
  const [loadedClips, setLoadedClips] = useState<Clip[]>([]);
  const [showErrorMessage, setShowErrorMessage] = useState<boolean>(false);
  const [shouldInfiniteLoad, setShouldInfiniteLoad] = useState<boolean>(true);
  const [isLoading, setIsLoading] = useState<boolean>(true);
  const { inView, ref: infiniteLoadRef } = useInView();

  useEffect(() => {
    const loadPageOnScroll = async () => {
      const nextPageClips = await loadNextPage();
      if (nextPageClips !== null && nextPageClips.length > 0) {
        setLoadedClips([...loadedClips, ...nextPageClips]);
        if (!shouldInfiniteLoad) {
          setShouldInfiniteLoad(true);
        }
      } else {
        setShouldInfiniteLoad(false);
      }
    };
    if (inView && !isLoading) {
      loadPageOnScroll();
    }
  }, [inView]);
  useEffect(() => {
    const loadFirstPage = async () => {
      const firstPageClips = await loadNextPage(0);
      setIsLoading(false);
      if (firstPageClips !== null) {
        setLoadedClips(firstPageClips);
        if (!shouldInfiniteLoad) {
          setShouldInfiniteLoad(true);
        }
      } else {
        setShowErrorMessage(true);
      }
    };
    loadFirstPage();
  }, []);
  return (
    <Modal
      title={'Select Clip from Library'}
      width={600}
      onClose={() => closeModal(ModalTypes.LIBRARY_SELECT)}
      titleWrapperClasses='ml-4'
    >
      {showErrorMessage ? (
        <div className='flex w-full flex-row justify-center p-8'>
          <span>{error}</span>
        </div>
      ) : isLoading ? (
        <div className='flex h-full w-full flex-row items-center justify-center p-8'>
          <SpinnerSVG />
        </div>
      ) : (
        <div className='h-[400px] overflow-y-auto'>
          {loadedClips.length === 0 ? (
            <span className='w-full text-center'>No clips loaded</span>
          ) : null}
          {loadedClips.map((clip: Clip, i: number) => (
            <ClipRow
              key={i}
              clip={clip}
              onClick={() => {
                if (!isFeatureEnabledForPlan(session, PlanFeature.Auk)) {
                  genForm.resetPersona();
                  createV2.setActivePersona(null);
                }
                clips.updateClips([clip]);
                genForm.resetCoverClip();
                genForm.setContinueClip(clip);
                closeModal(ModalTypes.LIBRARY_SELECT);
              }}
            />
          ))}
          {shouldInfiniteLoad ? (
            <div className='flex w-full flex-row py-4' ref={infiniteLoadRef}>
              <SpinnerSVG />
            </div>
          ) : null}
        </div>
      )}
    </Modal>
  );
};

export default LibrarySelectModal;