import { createElement } from 'react'
import { Schema as S } from 'effect'
import { Composition, slot, ui, Ui } from '@playfast/reform'
import { remoteContract, remoteViews } from './client'

class FooUi extends ui('Foo', {
  props: S.Struct({ n: S.Number }),
  events: { go: S.Struct({ x: S.String }) },
}) {}

const fooView = Ui.make(FooUi, (props, _slots, events) => {
  events.go({ x: String(props.n) })
  return null
})

Ui.make(FooUi, (props) => {
  // @ts-expect-error — `nope` is not a prop of Foo.
  props.nope
  return null
})

Ui.make(FooUi, (_props, _slots, events) => {
  // @ts-expect-error — `go` takes { x: string }, not { x: number }.
  events.go({ x: 1 })
  return null
})

Ui.make(FooUi, (_props, _slots, events) => {
  // @ts-expect-error — `nope` is not an event of Foo.
  events.nope({})
  return null
})

class FooComp extends Composition.make('FooComp', { title: 'Foo', ui: FooUi })<FooComp>() {}

class FooSlot extends slot('Foo')<FooSlot, typeof FooComp>() {}
class ShellUi extends ui('Shell', { props: S.Struct({}), slots: { Main: FooSlot } }) {}

const shellView = Ui.make(ShellUi, (_props, slots) => createElement(slots.Main, {}))

Ui.make(ShellUi, (_props, slots) =>
  // @ts-expect-error — `Other` is not a slot of Shell.
  createElement(slots.Other, {}),
)

const AppContractValue = remoteContract({ Foo: FooUi, Shell: ShellUi })
type AppContract = typeof AppContractValue

remoteViews<AppContract>({ Foo: fooView, Shell: shellView })

// @ts-expect-error — a view set MISSING `Shell` does not implement the server's shape.
remoteViews<AppContract>({ Foo: fooView })

remoteViews<AppContract>({
  Foo: fooView,
  // @ts-expect-error — `Shell` must be the Shell view, not a Foo view (wrong contract).
  Shell: fooView,
})

// @ts-expect-error — `Extra` is not a contract of the server's shape.
remoteViews<AppContract>({ Foo: fooView, Shell: shellView, Extra: fooView })