'use client'

import React, { useState, useRef } from 'react'
import './EntryContainer.css'
import SongEntry from './SongEntry'

export default function EntryContainer() {
    const buttonRef = useRef(null)
    const [selected, setSelected] = useState(null) as [null | HTMLButtonElement, React.Dispatch<React.SetStateAction<null | HTMLElement>>]

    const handleSongClick = (clickEvent: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
        const nextButton = buttonRef.current as unknown as HTMLButtonElement

        if (selected) {
            selected.parentElement?.removeAttribute("selected")
            selected.innerText = "Select"
        }

        const target = clickEvent.target as HTMLButtonElement
        if (target == selected) { setSelected(null); nextButton.setAttribute("disabled", ""); return }

        target.parentElement?.setAttribute("selected", "")
        target.innerText = "Selected"
        setSelected(target)

        nextButton.removeAttribute("disabled")
    }

    const handleNextClick = (clickEvent: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
        console.log("Yo?")
        const res = fetch("/api/songs")
    }

    return (
        <>
            <div className="entry-container">
                <SongEntry key="1" title="JJK S2 OP2" name="SPECIALZ" artist="King Gnu" embedId="5yb2N3pnztU" handleClick={handleSongClick}></SongEntry>
                <SongEntry key="2" title="JJK S1 OP1" name="Kaikai Kitan" artist="Eve" embedId="GwaRztMaoY0" handleClick={handleSongClick}></SongEntry>
            </div>
            <div className="button-holder">
                <button ref={buttonRef} onClick={handleNextClick} className="primary-button" disabled>Next</button>
            </div>
        </>
    )
}