frontend/src/components/PlaylQueue.js

"use client";

import React, { useState } from "react";
import { useMusicPlayer } from "@/context/MusicPlayerContext";
import { formatTitle } from "@/lib/utils";
import { FaTrash } from "react-icons/fa";
import { TbPlaylistX, TbX } from "react-icons/tb";
import "./PlayQueue.css";

const PlayQueue = () => {
  const {
    playqueue,
    initializePlayer,
    removeFromPlayqueue,
    currentIndex,
    setPlayqueue,
    isPlayEueOpen,
    setIsPlayEueOpen,
  } = useMusicPlayer();
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [playlistName, setPlaylistName] = useState("");

  const handlePlayTrack = (src, title) => {
    initializePlayer(src, title);
  };
  const handleIsPlayQueueOpen = () =>{
    setIsPlayEueOpen(!isPlayEueOpen);
  };

  const handleClearPlaylist = () => {
    if (window.confirm("Are you sure you want to clear the play queue?")) {
      setPlayqueue([]); // Clear the play queue and trigger a re-render
    }
  };

  const handleSavePlaylist = () => {
    if (!playlistName.trim()) return;
    const existingPlaylists =
      JSON.parse(localStorage.getItem("playlists")) || {};
    existingPlaylists[playlistName] = playqueue;
    localStorage.setItem("playlists", JSON.stringify(existingPlaylists));
    setIsModalOpen(false);
    setPlaylistName("");
  };

  return (
    isPlayEueOpen && (
      <div className="playlist-container">
        <div className="flex justify-between"><h2>Play Queue</h2> <button onClick={handleIsPlayQueueOpen}><TbX className="size-6"/> </button> </div>
        <div className="playlist-action-container">
          <button onClick={() => setIsModalOpen(true)} className="save-button">
            Save to Playlist
          </button>
          <button onClick={handleClearPlaylist} className="clear-button">
            <TbPlaylistX /> Clear Queue
          </button>
        </div>
        {isModalOpen && (
          <div className="modal">
            <div className="modal-content">
              <h3>Save Playlist</h3>
              <input
                className="playlist-name-input"
                type="text"
                placeholder="Enter playlist name"
                value={playlistName}
                onChange={(e) => setPlaylistName(e.target.value)}
              />
              <button
                onClick={handleSavePlaylist}
                className="save-confirm-button"
              >
                Save
              </button>
              <button
                onClick={() => setIsModalOpen(false)}
                className="modal-close-button"
              >
                Cancel
              </button>
            </div>
          </div>
        )}

        {playqueue.length === 0 ? (
          <p>Empty</p>
        ) : (
          <ul className="playlist">
            {playqueue.map((track, index) => (
              <li
                key={index}
                className={`playlist-item ${
                  currentIndex === index ? "playing" : ""
                }`}
              >
                <div className="track-info">
                  <span
                    className="track-title"
                    onClick={() => handlePlayTrack(track.source, track.title)}
                  >
                    {formatTitle(track.source)}
                  </span>
                </div>
                <button
                  className="remove-button"
                  onClick={() => removeFromPlayqueue(track.source)}
                >
                  <FaTrash />
                </button>
              </li>
            ))}
          </ul>
        )}
      </div>
    )
  );
};

export default PlayQueue;