// import { lanyard } from "utils/shared/lanyard";
import { useLanyard } from "use-lanyard";
import styles from "styles/Lanyard.module.sass";
import Image from "next/image";
import { useTheme } from 'next-themes'
import useWindowSize from "utils/shared/hooks/useWindowSize";
import Icon from "./Icon";

const Lanyard = () => {
  const id = process.env.NEXT_DISCORD_ID || "318044130796109825";
  const lanyard = useLanyard(id).data;
  const { resolvedTheme: theme } = useTheme()
  const windowSize = useWindowSize()

  if (!lanyard?.listening_to_spotify) return;



  let artists;

  if (lanyard.spotify.artist.split(";").length > 2) {
    artists = [
      lanyard.spotify.artist.split(";")[0],
      lanyard.spotify.artist.split(";")[1],
    ].join(",");
  } else {
    artists = lanyard.spotify.artist.split(";").join(" &");

  }



  return (
    <>
      {(windowSize.width <= 550 || windowSize.height <= 800) ?
        (<>
          <div data-theme={theme} className={styles.np_mobile}>

            <div className={styles.np_text}>
              <p>
                <Icon className={styles.np_icon} icon="asterisk" />
                {lanyard.spotify.song} by {artists}
              </p>
            </div>
          </div>
        </>)
        :
        (<>
          <div data-theme={theme} className={[styles.container, styles.badge].join(" ")}>
            <Image
              className={styles.albumart}
              src={lanyard.spotify.album_art_url}
              width={100}
              height={100}
            />
            <div className={styles.artist_song}>
              <p className={styles.song}>{lanyard.spotify.song}</p>
              <p className={styles.artist}>{artists}</p>
            </div>
          </div>
        </>
        )}
    </>
  );
};

export default Lanyard;