saladeaula.digital/apps/admin.saladeaula.digital/app/routes/_.$orgid.enrollments.buy/payment.tsx

import { useForm, Controller, useWatch } from 'react-hook-form'
import { zodResolver } from '@hookform/resolvers/zod'
import { ErrorMessage } from '@hookform/error-message'
import z from 'zod'
import { ArrowRightIcon } from 'lucide-react'

import { Button } from '@repo/ui/components/ui/button'
import { Label } from '@repo/ui/components/ui/label'
import { RadioGroup, RadioGroupItem } from '@repo/ui/components/ui/radio-group'
import { Separator } from '@repo/ui/components/ui/separator'

import { Checkbox } from '@repo/ui/components/ui/checkbox'
import {
  Field,
  FieldDescription,
  FieldGroup,
  FieldLabel,
  FieldLegend,
  FieldSeparator,
  FieldSet
} from '@repo/ui/components/ui/field'
import { Input } from '@repo/ui/components/ui/input'
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue
} from '@repo/ui/components/ui/select'
import { Textarea } from '@repo/ui/components/ui/textarea'

import { useWizard } from '@/components/wizard'
import { Card, CardContent } from '@repo/ui/components/ui/card'

const formSchema = z.object({
  payment_method: z.enum(['PIX', 'BANK_SLIP', 'CREDIT_CARD'], {
    error: 'Escolha uma forma de pagamento'
  })
})

type Schema = z.infer<typeof formSchema>

type PaymentProps = {
  onSubmit: (value: any) => void | Promise<void>
  defaultValues?: object
}

export function Payment({ onSubmit, defaultValues }: PaymentProps) {
  const wizard = useWizard()
  const { control, handleSubmit } = useForm<Schema>({
    defaultValues: {
      payment_method: '' as any,
      ...defaultValues
    },
    resolver: zodResolver(formSchema)
  })
  const paymentMethod = useWatch({ control, name: 'payment_method' })

  const onSubmit_ = async (data: Schema) => {
    await onSubmit(data)
    wizard('review')
  }

  return (
    <form onSubmit={handleSubmit(onSubmit_)} className="space-y-4">
      <Controller
        name="payment_method"
        control={control}
        render={({ field: { name, value, onChange }, formState }) => (
          <div className="space-y-1.5">
            <RadioGroup
              value={value}
              onValueChange={onChange}
              className="lg:flex gap-3
                       *:p-5 *:border *:rounded-xl *:flex-1
                       *:cursor-pointer *:bg-accent/25
                       *:has-[button[data-state=checked]]:bg-accent
            "
            >
              <Label>
                <RadioGroupItem value="PIX" />
                <span>Pix</span>
              </Label>

              <Label>
                <RadioGroupItem value="BANK_SLIP" />
                <span>Boleto bancário</span>
              </Label>

              <Label>
                <RadioGroupItem value="CREDIT_CARD" />
                <span>Cartão de crédito</span>
              </Label>
            </RadioGroup>

            <ErrorMessage
              errors={formState.errors}
              name={name}
              render={({ message }) => (
                <p className="text-destructive text-sm">{message}</p>
              )}
            />
          </div>
        )}
      />

      {paymentMethod === 'CREDIT_CARD' ? <CreditCard /> : null}

      <Separator />

      <div className="flex justify-between gap-4 *:cursor-pointer">
        <Button
          type="button"
          variant="link"
          className="text-black dark:text-white"
          onClick={() => wizard('cart')}
        >
          Voltar
        </Button>
        <Button type="submit" variant="secondary">
          Continuar <ArrowRightIcon />
        </Button>
      </div>
    </form>
  )
}

export function CreditCard() {
  return (
    <Card className="lg:max-w-md">
      <CardContent>
        <FieldGroup>
          <FieldSet>
            <FieldGroup>
              <Field>
                <FieldLabel htmlFor="checkout-7j9-card-number-uw1">
                  Número do cartão
                </FieldLabel>
                <Input id="checkout-7j9-card-number-uw1" required />
              </Field>

              <Field>
                <FieldLabel htmlFor="checkout-7j9-card-name-43j">
                  Nome do titular
                </FieldLabel>
                <Input required />
              </Field>

              <div className="grid grid-cols-3 gap-4">
                <Field>
                  <FieldLabel htmlFor="checkout-exp-month-ts6">Mês</FieldLabel>
                  <Select defaultValue="">
                    <SelectTrigger id="checkout-exp-month-ts6">
                      <SelectValue placeholder="MM" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="01">01</SelectItem>
                      <SelectItem value="02">02</SelectItem>
                      <SelectItem value="03">03</SelectItem>
                      <SelectItem value="04">04</SelectItem>
                      <SelectItem value="05">05</SelectItem>
                      <SelectItem value="06">06</SelectItem>
                      <SelectItem value="07">07</SelectItem>
                      <SelectItem value="08">08</SelectItem>
                      <SelectItem value="09">09</SelectItem>
                      <SelectItem value="10">10</SelectItem>
                      <SelectItem value="11">11</SelectItem>
                      <SelectItem value="12">12</SelectItem>
                    </SelectContent>
                  </Select>
                </Field>
                <Field>
                  <FieldLabel htmlFor="checkout-7j9-exp-year-f59">
                    Ano
                  </FieldLabel>
                  <Select defaultValue="">
                    <SelectTrigger id="checkout-7j9-exp-year-f59">
                      <SelectValue placeholder="AAAA" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="2024">2024</SelectItem>
                      <SelectItem value="2025">2025</SelectItem>
                      <SelectItem value="2026">2026</SelectItem>
                      <SelectItem value="2027">2027</SelectItem>
                      <SelectItem value="2028">2028</SelectItem>
                      <SelectItem value="2029">2029</SelectItem>
                    </SelectContent>
                  </Select>
                </Field>
                <Field>
                  <FieldLabel htmlFor="checkout-7j9-cvv">CVC</FieldLabel>
                  <Input id="checkout-7j9-cvv" placeholder="123" required />
                </Field>
              </div>
            </FieldGroup>
          </FieldSet>
        </FieldGroup>
      </CardContent>
    </Card>
  )
}