"use client";
import React, { useMemo } from "react";
import { Skeleton } from "@/components/ui/skeleton";
import { Section } from "@/components/profile/blocks/section";
import { SubscriptionCard } from "@/components/payment/blocks/subscription-card";
import { api } from "@/lib/trpc/client";

type SubscriptionsSectionProps = {
    organizationId: string;
};

export const SubscriptionsSection: React.FC<SubscriptionsSectionProps> = (props) => {
    const { organizationId } = props;

    const { isLoading: isUserLoading, data: user } = api.auth.user.useQuery();

    const { isLoading: isOrganizationLoading, data: organization } = api.organization.get.useQuery({
        with: ["invitations", "members"],
        id: organizationId
    });

    const { isLoading, data: subscriptions = [] } = api.payment.subscription.list.useQuery({
        with: ["price"],
        organizationId
    });

    const member = useMemo(() => {
        return user && organization ? organization.members.find((m) => m.userId === user.id) : undefined;
    }, [user, organization]);

    if (isUserLoading || isOrganizationLoading || isLoading) {
        return <Skeleton className='h-40 w-full' />;
    }

    if (!isLoading && !subscriptions.length) {
        return null;
    }

    return (
        <Section title='abonnement'>
            <div className='space-y-4'>
                {subscriptions.map((subscription) => {
                    return (
                        <SubscriptionCard
                            key={subscription.id}
                            subscription={subscription}
                            organization={organization}
                            member={member}
                        />
                    );
                })}
            </div>
        </Section>
    );
};