'use client';
import React from 'react';
import { skipToken } from '@tanstack/react-query';
import { Loader2 } from 'lucide-react';
import { toast } from 'sonner';
import { StepItem } from '@/components/payment/step-item';
import {
  Select,
  SelectTrigger,
  SelectValue
} from '@/components/ui/select';
import { usePurchaseStore } from '@/lib/purchase-store';
import { TierSelectContent } from "@/components/payment/blocks/tier-select-content";
import { api } from '@/lib/trpc/client';

export const Step2: React.FC = () => {
  const { state, setSeats } = usePurchaseStore();

  const { isLoading, data: price } = api.payment.planPrice.get.useQuery(
    state.priceId ? { id: state.priceId } : skipToken
  );

  if (!state.organizationId) {
    return null;
  }

  if (isLoading) {
    return (
      <div className='m-4 flex items-center justify-center gap-2'>
        <Loader2 className='size-8 animate-spin' /> Indlæser...
      </div>
    );
  }

  if (!price?.tiers) {
    toast.error('Fejlindlæsningsrater for erhvervsabonnementer.');
    return null;
  }

  return (
    <StepItem step='2/2' title='Vælg antal'>
      <p className='mb-2 text-center font-bold text-neutral-600'>
        Antal medlemmer
      </p>

      <Select
        value={state.seats as unknown as string}
        onValueChange={setSeats as unknown as (v: string) => void}
      >
        <SelectTrigger className='h-11 w-full rounded-none bg-white'>
          <SelectValue />
        </SelectTrigger>

        <TierSelectContent
          className='rounded-none'
          price={price}
        />
      </Select>
    </StepItem>
  );
};