import { createRouter, Todo } from "@<@var(context.project.name)>/rpc"
import { useEffect, useState } from "react"
import { ScrollView, Button, Checkbox, Host, Column, TextInput, Text, useNativeState, Row, Icon } from "@expo/ui";
import * as Crypto from "expo-crypto"
import { colorInvert, controlSize } from "@expo/ui/swift-ui/modifiers";
import { fillMaxWidth, padding, width } from "@expo/ui/jetpack-compose/modifiers";
export default function Index() {
  const router = createRouter("http://10.0.2.2:8080")
  const [todos, setTodos] = useState<Array<Todo>>([])
  const todoToCreateTask = useNativeState<string>("")
  const fetchTodos = () => {
    router.todos.listTodos({}).then((r) => {
      setTodos(r.todos)
    })
  }
  useEffect(() => {
    fetchTodos();
  })

  const setTodoDone = (id: string, task: string) => {
    return (done: boolean) => {
      router.todos.updateTodo({ todo: { id, task, done } })
      fetchTodos()
    }
  }

  const deleteTodo = (id: string) => {
    return () => {
      router.todos.deleteTodo({ todo: { id } })
      fetchTodos()
    }
  }

  const createTodo = () => {
    router.todos.createTodo({ todo: { id: Crypto.randomUUID(), task: todoToCreateTask.value } }).then((r) => {
      console.log(r)
      fetchTodos()
    }).catch((e) => {
      console.log(e)
    })
  }

  const updateTodoToCreateTask = (task: string) => {
    todoToCreateTask.value = task
  }

  return (
    <Host style={{ flex: 1 }}>
      <Column alignment="center" modifiers={[fillMaxWidth()]}>
        <Text> create todo </Text>
        <TextInput value={todoToCreateTask} onChangeText={updateTodoToCreateTask} />
        <Button modifiers={[controlSize('regular')]} label="create Todo" onPress={createTodo} />
        <ScrollView modifiers={[fillMaxWidth()]}>
          {
            todos.map((todo) => (
              <Row alignment="center" modifiers={[fillMaxWidth(),padding(20,0,20,0)]}>
                <Column alignment="start" modifiers={[width(200)]}>
                    <Text> {todo.task} </Text>
                </Column>
                <Column alignment="center">
                    <Checkbox value={todo.done || false} onValueChange={setTodoDone(todo.id || "", todo.task)} />
                </Column>
                <Column alignment="end" modifiers={[fillMaxWidth()]}>
                  <Button modifiers={[controlSize('regular')]} label="delete" onPress={deleteTodo(todo.id || "")}/>
                </Column>
              </Row>
            ))
          }
        </ScrollView>
      </Column>
    </Host>
  )
}