import AddIcon from '@/Components/Icons/AddIcon';
import AddStackIcon from '@/Components/Icons/AddStackIcon';
import PrimaryButton from '@/Components/PrimaryButton';
import Reproductor from '@/Components/Reproductor';
import SecondaryButton from '@/Components/SecondaryButton';
import Authenticated from '@/Layouts/AuthenticatedLayout';
import { Cancion } from '@/types/types';
import { useState } from 'react';

export default function Gallery({ songs }: { songs: Cancion[] }) {
  const [progress, setProgress] = useState(0);
  const [isPlaying, setIsPlaying] = useState(false);
  const [queue, setQueue] = useState<Cancion[]>([]);
  const [currentSong, setCurrentSong] = useState<Cancion>();

  const addToQueue = (song: Cancion) => {
    if (queue.length === 0) {
      setQueue([song]);
    } else {
      setQueue([...queue, song]);
    }
  };

  return (
    <Authenticated
      header={
        <h2 className="text-xl font-semibold leading-tight text-gray-800 dark:text-gray-200">
          Galeria Canciones
        </h2>
      }
    >
      <div className="p-2">
        <div className="mx-auto max-w-7xl sm:px-6 lg:px-8">
          <div className="grid max-h-[calc(100vh-250px)] grid-cols-1 gap-6 overflow-y-auto sm:grid-cols-2 lg:grid-cols-3">
            {songs.map((song) => (
              <div
                key={song.id}
                className="overflow-hidden rounded-lg bg-white shadow-lg dark:bg-gray-800"
              >
                <img
                  src={song.cover}
                  alt={song.title}
                  className="h-48 w-full object-cover"
                />
                <div className="p-4">
                  <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
                    {song.title}
                  </h3>
                  <p className="text-sm text-gray-600 dark:text-gray-300">
                    {song.artist}
                  </p>
                  <div className="mt-1 flex gap-1">
                    <PrimaryButton onClick={() => setCurrentSong(song)}>
                      <AddIcon />
                    </PrimaryButton>
                    <SecondaryButton onClick={() => addToQueue(song)}>
                      <AddStackIcon />
                    </SecondaryButton>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
        <Reproductor
          song={currentSong}
          setSong={setCurrentSong}
          playlist={queue}
          setplaylist={setQueue}
        />
      </div>
    </Authenticated>
  );
}