import type { ReactNode} from "react";
import { useEffect, useState } from "react";
import type { StationWithTagsClientSide } from "~/models/station.server";

export type StationPlayerProps = {
    station: StationWithTagsClientSide | null
};

export function StationPlayer({ station }: StationPlayerProps) {
    const [player, setPlayer] = useState<ReactNode | null>(null);

    useEffect(() => {
        if (typeof window === 'undefined') return;
        const importComponent = async () => {
            if (!station) return;
            try {
                
                const module = await import('react-radio-player');
                const RadioBottomBarPlayer = module.RadioBottomBarPlayer;
                setPlayer(<RadioBottomBarPlayer 
                  streamUrl={station.streamUrl} 
                  title={station.name} 
                  description={station.description || undefined}
                  image={station.imgUrl}
                  secondDescription={`* ${station}`}
                  />);
            } catch (error) {
                console.log('rerrerer', error)
            }
        };
        importComponent()
    }, [station])
  
    if (!station || !player) {
        return <></>;
    }
    return (
        <div
            className="fixed bottom-0 right-[-1rem] w-[76%] h-[70px] px-4 py-2 z-50 flex justify-end content-center items-center gap-2 text-accent-content">
                {player}
        </div>
    );
}