import { PlayIcon, SpeakerWaveIcon } from "@heroicons/react/24/solid";
import type { Tag } from "@prisma/client";
import { Link, useLocation } from "@remix-run/react";
import { ListenLink } from "~/components/page-layout";
import type { StationWithTagsClientSide } from "~/models/station.server";
import { getStationUrl, type ConvertDatesToStrings } from "~/utils";

export type StationsGalleryProps = {
    stations: StationWithTagsClientSide[];
    tag?: ConvertDatesToStrings<Tag>;
};

export function StationsGallery({ stations, tag }: StationsGalleryProps) {
    const location = useLocation();
    const currentStationId = new URLSearchParams(location.search).get('station')?.trim()
    return (
        <div className="grid grid-cols-1 md:grid-cols-3 xl:grid-cols-4 gap-4">
            {stations.map((station) => {
                return (
                    <div key={station.id} className="card card-compact bg-base-100 shadow-xl mb-[70px]">
                        <figure><img src={station.imgUrl} alt="Radio Station" /></figure>
                        <div className="card-body">
                            <div className="flex items-center justify-start gap-2">
                                <h2 className="card-title">
                                    {station.name}
                                </h2>
                                {station.id === currentStationId ? <div className="w-4 h-4">
                                    <SpeakerWaveIcon />
                                </div> : null}
                            </div>
                            <h2 className="flex gap-1">
                                {station.tags.map((t, id) => {
                                    return <ListenLink key={id} to={`/listen/tag/${t.tag.slug}`}
                                                       className="badge badge-secondary">{t.tag.name}</ListenLink>;
                                })}
                            </h2>
                            <p>{station.description}</p>
                            <div className="card-actions justify-end">
                                <Link preventScrollReset  to={getStationUrl(station.id, tag)}
                                      className={`btn btn-primary gap-2 plausible-event-name=play-station plausible-event-station=${station.slug}`}>
                                    <PlayIcon className="h-6 w-6" />
                                    Listen Now
                                </Link>
                            </div>
                        </div>
                    </div>
                );

            })}
        </div>
    );
}