import { Schema as S } from 'effect'
import { ui, type ViewImpl, type UiContract } from '@playfast/reform'
import { Form } from '@playfast/reform-forms'
import { FormUi, type FieldComponent } from './index'

const Payment = S.Union(
  S.TaggedStruct('Card', { cardNumber: S.String }),
  S.TaggedStruct('Paypal', { email: S.String }),
)

const CheckoutSchema = S.Struct({
  email: S.String,
  age: S.Number,
  items: S.Array(S.Struct({ name: S.String })),
  payment: Payment,
})

class CheckoutForm extends Form.make('CheckoutTypecheckForm', { schema: CheckoutSchema }) {}

interface CheckoutContract extends UiContract {
  readonly props: { readonly form: Form.View<typeof CheckoutForm> }
}

class CheckoutUi extends ui('CheckoutTypecheckUi')<CheckoutContract>() {}

const TextInput: FieldComponent<string> = () => null
const NumberInput: FieldComponent<number> = () => null

export const ok: ViewImpl<CheckoutContract> = FormUi.make(
  CheckoutUi,
  CheckoutForm,
  ({ field, array, variant }) => (
    <>
      {field('email').as(TextInput)}
      {field('age').as(NumberInput)}
      {array('items', ({ items: rows }) => (
        <>{rows.map((row) => row.field('name').as(TextInput))}</>
      ))}
      {variant('payment', {
        Card: ({ field }) => field('cardNumber').as(TextInput),
        Paypal: ({ field }) => field('email').as(TextInput),
      })}
    </>
  ),
)

export const badPath: ViewImpl<CheckoutContract> = FormUi.make(
  CheckoutUi,
  CheckoutForm,
  ({ field }) => (
    // @ts-expect-error unknown field path
    <>{field('missing').as(TextInput)}</>
  ),
)

export const badComponent: ViewImpl<CheckoutContract> = FormUi.make(
  CheckoutUi,
  CheckoutForm,
  ({ field }) => (
    // @ts-expect-error age is a number field, not a string field
    <>{field('age').as(TextInput)}</>
  ),
)

export const badVariant: ViewImpl<CheckoutContract> = FormUi.make(
  CheckoutUi,
  CheckoutForm,
  ({ variant }) => (
    <>
      {/* @ts-expect-error Paypal is required for exhaustive variant mapping */}
      {variant('payment', {
        Card: ({ field }) => field('cardNumber').as(TextInput),
      })}
    </>
  ),
)