"use client";
import React, { useMemo } from "react";
import { Skeleton } from "@/components/ui/skeleton";
import { Section } from "@/components/profile/blocks/section";
import { MemberList } from "@/components/organization/blocks/member-list";
import { api } from "@/lib/trpc/client";

type MembersSectionProps = {
    organizationId: string;
};

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

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

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

    // const member = useMemo(() => {
    //     if(!user || !organization || !organization.members) {
    //         return null;
    //     }
    //
    //     return organization.members.find((m) => m.userId === user.id);
    // }, [user, organization]);

    if(isLoading) {
        return (
            <Skeleton className="h-80 w-full" />
        );
    }

    return (
        <Section title="abonnement / medlemskab">
            {/*{subscripionStatus !== SubscriptionStatus.ACTIVE && (
                <p className="text-sm text-muted-foreground">
                    Du har ikke noget aktivt abonnement.
                </p>
            )}*/}

            <MemberList organizationId={organizationId} />
        </Section>
    );
};