import { Todo } from "@/store/useTodos";
import { FlatList } from "react-native";
import { VStack } from "./ui/vstack";
import { Text } from "./ui/text";
import { HStack } from "./ui/hstack";
import {
  Checkbox,
  CheckboxIcon,
  CheckboxIndicator,
  CheckboxLabel,
} from "./ui/checkbox";
import { Button, ButtonText } from "./ui/button";
import { GS } from "./ui/gluestack-ui-provider/gluestack-ui-token";

type Props = {
  data: Todo[];
  onToggle: (id: string) => void;
  onRemove?: (id: string) => void;
};

export default function TodoList({ data, onToggle, onRemove }: Props) {
  return (
    <FlatList
      data={data}
      keyExtractor={(it) => it.id}
      contentContainerStyle={{ paddingBottom: 80 }}
      renderItem={({ item }) => (
        <HStack className="items-center py-2">
          <Checkbox
            isChecked={item.done}
            onChange={(_isChecked) => onToggle(item.id)}
            value={item.title}
          >
            <CheckboxIndicator>
              <CheckboxIcon />
            </CheckboxIndicator>
            <CheckboxLabel className="data-[checked=true]:line-through">
              {item.title}
            </CheckboxLabel>
          </Checkbox>
          {onRemove ? (
            <Button
              variant={GS.variant.link}
              action={GS.action.negative}
              onPress={() => onRemove(item.id)}
            >
              <ButtonText>삭제</ButtonText>
            </Button>
          ) : null}
        </HStack>
      )}
      ListEmptyComponent={
        <Text className="text-neutral-400 mt-6 text-center">
          할 일이 없습니다.
        </Text>
      }
    />
  );
}