import { useMutation } from '@tanstack/react-query'
import type { CreateFirstGroup, OnboardingGroupDto } from '@gruperly/shared'
import { createFirstGroup } from '../../lib/api'
import { GroupForm } from '../groups/GroupForm'

type FirstGroupStepProps = {
  onBack: () => void
  onCompleted: (group: OnboardingGroupDto) => void
}

export function FirstGroupStep({ onBack, onCompleted }: FirstGroupStepProps) {
  const create = useMutation({
    mutationFn: (values: CreateFirstGroup) => createFirstGroup(values),
    onSuccess: (result) => onCompleted(result.group),
  })

  return (
    <GroupForm
      heading="Tu primer grupo"
      description="Definí los datos de la clase que vas a cobrar. Después siempre podés editarlos."
      submitLabel="Crear grupo"
      isSubmitting={create.isPending}
      errorMessage={
        create.isError ? 'No pudimos crear el grupo. Revisá los datos e intentá de nuevo.' : null
      }
      onSubmit={(values) => create.mutate(values)}
      onBack={onBack}
    />
  )
}