import TodoList from "@/components/TodoList";
import { Button, ButtonText } from "@/components/ui/button";
import { GS } from "@/components/ui/gluestack-ui-provider/gluestack-ui-token";
import { HStack } from "@/components/ui/hstack";
import { Input, InputField } from "@/components/ui/input";
import { Text } from "@/components/ui/text";
import { VStack } from "@/components/ui/vstack";
import { useTodosCtx } from "@/store/todoProvider";
import { useState } from "react";
import { KeyboardAvoidingView, Platform } from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";

export default function ActiveTab() {
  const { activeTodos, leftCount, add, toggle, completeAll } = useTodosCtx();
  const [title, setTitle] = useState("");

  const onAdd = () => {
    add(title);
    setTitle("");
  };

  return (
    <SafeAreaView style={{ flex: 1 }} className="bg-white dark:bg-neutral-900">
      <KeyboardAvoidingView
        style={{ flex: 1 }}
        behavior={Platform.OS === "ios" ? "padding" : "height"}
        keyboardVerticalOffset={30}
      >
        <VStack className="flex-1 px-4 py-1 gap-3">
          <Text className="text-2xl font-bold">할일</Text>
          {/* 확인 창 */}
          <TodoList data={activeTodos} onToggle={toggle} />
          {/* 입력 창 */}
          <HStack className="gap-2">
            <Input className="flex-1">
              <InputField
                value={title}
                onChangeText={setTitle}
                placeholder="할 일을 입력하세요"
                returnKeyType="done"
                onSubmitEditing={onAdd}
              />
            </Input>
            <Button action={GS.action.primary} onPress={onAdd}>
              <ButtonText>추가</ButtonText>
            </Button>
          </HStack>
        </VStack>
      </KeyboardAvoidingView>
    </SafeAreaView>
  );
}