import * as Domain from "@/domain"
import { Box, Button, Flex, IconButton, TextArea } from "@radix-ui/themes"
import { GetRandomValues, makeUuid4 } from "@typed/id"
import { Chunk, Effect, Match, Option, Ref, Runtime, SubscriptionRef } from "effect"
import { Component, Hook } from "effect-fc"
import { SubscriptionSubRef } from "effect-fc/types"
import * as React from "react"
import { FaArrowDown, FaArrowUp } from "react-icons/fa"
import { FaDeleteLeft } from "react-icons/fa6"
import { TodosState } from "./TodosState.service"


const makeTodo = makeUuid4.pipe(
    Effect.map(id => Domain.Todo.Todo.make({
        id,
        content: "",
        completedAt: Option.none(),
    })),
    Effect.provide(GetRandomValues.CryptoRandom),
)


export type TodoProps = (
    | {
        readonly _tag: "new"
        readonly index?: never
    }
    | {
        readonly _tag: "edit"
        readonly index: number
    }
)

export const Todo = Component.make(function* Todo(props: TodoProps) {
    const runtime = yield* Effect.runtime()
    const state = yield* TodosState

    const ref = yield* Hook.useMemo(() => Match.value(props).pipe(
        Match.tag("new", () => Effect.andThen(makeTodo, SubscriptionRef.make)),
        Match.tag("edit", ({ index }) => Effect.succeed(SubscriptionSubRef.makeFromChunkRef(state.ref, index))),
        Match.exhaustive,
    ), [props._tag, props.index])

    const contentRef = React.useMemo(() => SubscriptionSubRef.makeFromPath(ref, ["content"]), [ref])
    const [todo, todosSize] = yield* Hook.useSubscribeRefs(ref, state.sizeRef)

    return (
        <Flex direction="column" align="stretch" gap="2">
            <Flex direction="row" align="center" gap="2">
                <Box flexGrow="1">
                    <TextArea
                        value={todo.content}
                        onChange={e => Runtime.runSync(runtime)(Ref.set(contentRef, e.target.value))}
                    />
                </Box>

                {props._tag === "edit" &&
                    <Flex direction="column" justify="center" align="center" gap="1">
                        <IconButton
                            onClick={() => Runtime.runSync(runtime)(
                                Ref.updateSome(state.ref, todos => Option.gen(function*() {
                                    if (props.index <= 0)
                                        return yield* Option.none()

                                    const toSwapIndex = props.index - 1
                                    const toSwap = yield* Chunk.get(todos, toSwapIndex)
                                    return todos.pipe(
                                        Chunk.replace(props.index, toSwap),
                                        Chunk.replace(toSwapIndex, todo),
                                    )
                                }))
                            )}
                        >
                            <FaArrowUp />
                        </IconButton>

                        <IconButton
                            onClick={() => Runtime.runSync(runtime)(
                                Ref.updateSome(state.ref, todos => Option.gen(function*() {
                                    if (props.index >= Chunk.size(todos))
                                        return yield* Option.none()

                                    const toSwapIndex = props.index + 1
                                    const toSwap = yield* Chunk.get(todos, toSwapIndex)
                                    return todos.pipe(
                                        Chunk.replace(props.index, toSwap),
                                        Chunk.replace(toSwapIndex, todo),
                                    )
                                }))
                            )}
                        >
                            <FaArrowDown />
                        </IconButton>

                        <IconButton
                            onClick={() => Runtime.runSync(runtime)(
                                Ref.update(state.ref, Chunk.remove(props.index))
                            )}
                        >
                            <FaDeleteLeft />
                        </IconButton>
                    </Flex>
                }
            </Flex>

            {props._tag === "new" &&
                <Flex direction="row" justify="center">
                    <Button
                        onClick={() => ref.pipe(
                            Effect.andThen(todo => Ref.update(state.ref, Chunk.prepend(todo))),
                            Effect.andThen(makeTodo),
                            Effect.andThen(todo => Ref.set(ref, todo)),
                            Runtime.runSync(runtime),
                        )}
                    >
                        Add
                    </Button>
                </Flex>
            }
        </Flex>
    )
})
