import "./Queue.css";

import {
  IonButton,
  IonContent,
  IonHeader,
  IonModal,
  IonSearchbar,
  IonTitle,
  IonToolbar,
} from "@ionic/react";

import React, { useState } from "react";

import { ArrowBigUp, Plus } from "lucide-react";

interface NowPlayingDiscProps {
  coverUrl: string;
  title: string;
  artist: string;
  upvoted?: boolean;
  upvotes?: number;
}

interface QueueProps {
  songs: NowPlayingDiscProps[];
}

const Queue: React.FC<QueueProps> = ({ songs }) => {
  const [showModal, setShowModal] = useState(false);
  const [searchText, setSearchText] = useState("");

  const handleUpVote = () => {};

  return (
    <div className="queue-container">
      <div className="queue-header">
        <h1 className="queue">Up next</h1>
        <Plus
          size={24}
          color="white"
          strokeWidth={2}
          onClick={() => {
            setShowModal(true);
          }}
        />
      </div>

      {songs.map((song, index) => {
        const isUpvoted = song.upvoted ?? false;
        const votes = song.upvotes ?? 0;

        return (
          <div className="song-item" key={index}>
            <img
              className="cover"
              src={song.coverUrl}
              alt={`${song.title} cover`}
            />
            <div className="text-info">
              <div className="title">{song.title}</div>
              <div className="artist">{song.artist}</div>
            </div>

            <div
              className="upvote-container"
              style={{
                display: "flex",
                alignItems: "center",
                gap: "6px",
                marginLeft: "auto",
                cursor: "pointer",
              }}
              onClick={handleUpVote}
            >
              <span
                style={{ fontWeight: "600", color: "#444", userSelect: "none" }}
              >
                {votes}
              </span>
              <ArrowBigUp
                size={24}
                strokeWidth={2.5}
                color={isUpvoted ? "#ff6600" : "#999"}
                fill={isUpvoted ? "#ff6600" : "none"}
              />
            </div>
          </div>
        );
      })}

      <IonModal isOpen={showModal} onDidDismiss={() => setShowModal(false)}>
        <IonHeader>
          <IonToolbar>
            <IonTitle>Add Songs</IonTitle>
            <IonButton
              slot="end"
              fill="clear"
              onClick={() => setShowModal(false)}
            >
              Close
            </IonButton>
          </IonToolbar>
        </IonHeader>
        <IonContent>
          <IonSearchbar
            value={searchText}
            onIonInput={(e) => setSearchText(e.detail.value!)}
            placeholder="Search..."
          />
        </IonContent>
      </IonModal>
    </div>
  );
};

export default Queue;