import { R } from "@/reffuse"
import { Button, Flex, Text } from "@radix-ui/themes"
import { createFileRoute } from "@tanstack/react-router"
import { GetRandomValues, makeUuid4 } from "@typed/id"
import { Console, Effect, Ref } from "effect"


export const Route = createFileRoute("/tests")({
    component: RouteComponent
})

function RouteComponent() {
    // const value = R.useMemoScoped(Effect.addFinalizer(() => Console.log("cleanup")).pipe(
    //     Effect.andThen(makeUuid4),
    //     Effect.provide(GetRandomValues.CryptoRandom),
    // ), [])
    // console.log(value)

    R.useFork(() => Effect.addFinalizer(() => Console.log("cleanup")).pipe(
        Effect.andThen(Console.log("ouient")),
        Effect.delay("1 second"),
    ), [])


    const uuidRef = R.useRef("none")
    const anotherRef = R.useRef(69)

    console.log(R.useSubscribeStream(uuidRef.changes))


    const logValue = R.useCallbackSync(Effect.fn(function*(value: string) {
        yield* Effect.log(value)
    }), [])

    const generateUuid = R.useCallbackSync(() => makeUuid4.pipe(
        Effect.provide(GetRandomValues.CryptoRandom),
        Effect.flatMap(v => Ref.set(uuidRef, v)),
    ), [])


    return (
        <Flex direction="row" justify="center" align="center" gap="2">
            <R.SubscribeRefs refs={[uuidRef, anotherRef]}>
                {(uuid, anotherRef) => <Text>{uuid} / {anotherRef}</Text>}
            </R.SubscribeRefs>

            <Button onClick={() => logValue("test")}>Log value</Button>
            <Button onClick={() => generateUuid()}>Generate UUID</Button>
        </Flex>
    )
}