import { observer } from 'mobx-react-lite';
import { useEffect, useState } from 'react';

import { useStores } from '@/app/(root)/AppProviders';
import PersonaCard from '@/components/card/PersonaCard';
import SpinnerSVG from '@/components/svg/SpinnerSVG';

export const LibraryV2TrashPersonas = observer(() => {
  const { persona } = useStores();
  const [trashedPersonas, setTrashedPersonas] = useState<any[]>([]);
  const [isLoadingPersonas, setIsLoadingPersonas] = useState(true);

  useEffect(() => {
    const loadData = async () => {
      const response = await persona.getTrashedPersonas();
      setTrashedPersonas(response || []);
      setIsLoadingPersonas(false);
    };
    loadData();
  }, [persona]);

  return (
    <div className='m-4 flex h-full flex-col'>
      {isLoadingPersonas ? (
        <div className='flex justify-center pt-[60px]'>
          <SpinnerSVG />
        </div>
      ) : trashedPersonas?.length === 0 ? (
        <div className='text-center font-sans text-foreground-primary'>
          No trashed personas found.
        </div>
      ) : (
        <div className='mx-0 grid w-full max-w-full grid-cols-2 gap-2 px-4 py-0 md:mx-auto md:gap-6 md:py-4 lg:grid-cols-[repeat(auto-fill,minmax(200px,1fr))] lg:pr-10 lg:pl-2'>
          {trashedPersonas?.map((persona: any) => (
            <PersonaCard
              name={persona.name}
              key={persona.id}
              id={persona.id}
              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>
      )}
    </div>
  );
});

export default LibraryV2TrashPersonas;