'use client'

import * as Card from "~/components/ui/card";
import { useTimeLine } from "../../_providers/GsapProvicer";
import AnimatedPageTitle from "../../_components/Animated/AnimatedPageTitle";
import AnimateTextIn from "../../_components/Animated/AnimateIn";
import { ScrollArea } from "~/components/ui/scroll-area";
import AnimatePopUp from "../../_components/Animated/AnimatePopUp";
import AudioPlayer from "./AudioPlayer";
import type { RouterOutputs } from "~/server/routers/_app";

export default function MusicPage(props: {
  tracks: RouterOutputs['music']['list'],
}) {
  const { tracks } = props;
  useTimeLine(tracks)
  return (
    <ScrollArea className="px-10 lg:px-0 w-full h-full max-w-4xl mx-auto pt-10">
      <AnimatedPageTitle position={0}><span>Just Some </span> <span>Music I Made</span> </AnimatedPageTitle>
      <div className="flex flex-wrap h-fit content-center">
        <AnimateTextIn once className="flex flex-wrap mr-[1em]" position={0.5}>
          <div><p className="break-after-avoid mr-[1em]">All works on this page are licensed under:</p></div>
          <div><a href="https://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a></div>
        </AnimateTextIn>
        <AnimatePopUp duration={1} ease='elastic.inOut' position={2} once className="items-center content-center">
          <div className="flex flex-row">
            <img className="max-w-[1em]" src="https://mirrors.creativecommons.org/presskit/icons/cc.svg" alt="" />
            <img className="max-w-[1em] ml-[1em]" src="https://mirrors.creativecommons.org/presskit/icons/by.svg" alt="" />
            <img className="max-w-[1em] ml-[1em]" src="https://mirrors.creativecommons.org/presskit/icons/nc.svg" alt="" />
            <img className="max-w-[1em] ml-[1em]" src="https://mirrors.creativecommons.org/presskit/icons/sa.svg" alt="" />
          </div>
        </AnimatePopUp>
      </div>
      <div className="pt-10" />
      {tracks && tracks.map((track, i) => (
        <div key={track.id}>
          <Card.AnimatedCard position={i + 1}>
            <Card.CardHeader>
              <AnimateTextIn once position={i + 1.2} animation="slide">
                <Card.CardTitle>{track.title}</Card.CardTitle>
              </AnimateTextIn>
            </Card.CardHeader>
            <Card.CardContent className="flex flex-col gap-3">
              {track.description && (
                <AnimatePopUp once position={i + 1.25} duration={2}>
                  <p className="text-sm text-muted-foreground">{track.description}</p>
                </AnimatePopUp>
              )}
              <AnimatePopUp duration={2} ease='elastic.inOut'  position={i + 1.3} once>
                <AudioPlayer
                  id={track.id}
                  src={track.streamUrl ?? track.fileUrl}
                  downloadUrl={track.fileUrl}
                  downloadName={track.fileName}
                />
              </AnimatePopUp>
            </Card.CardContent>
          </Card.AnimatedCard>
          <div className="pt-5" />
        </div>
      ))}
      {!tracks?.length &&
        <div className="flex justify-center items-center text-muted-foreground">
          No music yet.
        </div>}
    </ScrollArea>
  );
}