import { runtime } from "@/runtime"
import { Flex, Text, TextField } from "@radix-ui/themes"
import { createFileRoute } from "@tanstack/react-router"
import { GetRandomValues, makeUuid4 } from "@typed/id"
import { Effect } from "effect"
import { Component } from "effect-fc"
import * as React from "react"


const RouteComponent = Component.make(function* RouteComponent() {
    const VSubComponent = yield* Component.useFC(SubComponent)
    const VMemoizedSubComponent = yield* Component.useFC(MemoizedSubComponent)

    const [value, setValue] = React.useState("")

    return (
        <Flex direction="column" gap="2">
            <TextField.Root
                value={value}
                onChange={e => setValue(e.target.value)}
            />

            <VSubComponent />
            <VMemoizedSubComponent />
        </Flex>
    )
}).pipe(
    Component.withRuntime(runtime.context)
)

class SubComponent extends Component.make(function* SubComponent(props: { readonly value?: string }) {
    const id = yield* makeUuid4.pipe(Effect.provide(GetRandomValues.CryptoRandom))
    return <Text>{id}</Text>
}) {}

class MemoizedSubComponent extends SubComponent.pipe(
    Component.memo,
    Component.suspense,
    Component.memo,
) {}
type T = typeof MemoizedSubComponent extends Component.Memoized<infer P> ? P : never

export const Route = createFileRoute("/dev/memo")({
    component: RouteComponent,
})