'use client';
import { type User } from 'better-auth';
import { Separator } from '@/components/ui/separator';
import { BusinessOption } from '@/types/interfaces';
import { api } from '@/lib/trpc/client';
import { SubscriptionStatus } from '@/server/modules/payment/types/subscription-status.enum';
import MemberControlForm from './member-control-form';

type Props = {
  user: User;
  currentPlan: (BusinessOption & { plan: string; seats: number }) | undefined;
  subscripionStatus?: string;
  organizationId: string;
};

export default function MemberBlock({
  user,
  currentPlan,
  subscripionStatus,
  organizationId
}: Props) {
  const { isLoading, data: members = [] } =
    api.organization.member.list.useQuery({
      with: ['user'],
      organizationId
    });

  if (isLoading) {
    // TODO: Add loader
    return <div>Loading...</div>;
  }

  return (
    <section className='mx-auto w-full max-w-[1362px] grow p-3 md:px-8 md:py-4 xl:border-x'>
      <div className='flex flex-col xl:flex-row'>
        <div className='shrink-0 xl:w-68'>
          <h2 className='mb-4 text-xl leading-none font-bold text-[#CBCBCB] md:text-3xl'>
            abonnement / medlemskab
          </h2>
        </div>

        <div className='w-full'>
          {subscripionStatus !== SubscriptionStatus.ACTIVE && (
            <p className='text-muted-foreground text-sm'>
              Du har ikke noget aktivt abonnement.
            </p>
          )}

          {subscripionStatus === SubscriptionStatus.ACTIVE && (
            <MemberControlForm
              user={user}
              currentPlan={currentPlan}
              members={members}
              organizationId={organizationId}
            />
          )}
        </div>
      </div>

      <Separator className='mt-7' />
    </section>
  );
}