import type {FunctionComponent} from 'react'
import ToDoItem from './toDoItem'
import {LegendList} from '@legendapp/list'
import {useGetTasks} from '@/db/tasksAPI'

interface ToDoListProps {
  completedTasks: boolean | null
}

const ToDoList: FunctionComponent<ToDoListProps> = ({completedTasks}) => {
  const {data: tasks} = useGetTasks()
  const filteredTasks = tasks.filter(t => (completedTasks === null ? true : t.completed === completedTasks))

  return (
    <>
      {/**
       * De legendList component is performanter dan de ScrollView en FlatList componenten.
       * Alledrie kunnen gebruikt worden om data te renderen waardoor de gebruiker kan scrollen.
       * De FlatList/LegendList componenten hebben echter één groot voordeel, de componenten renderen enkel de items die
       * in de view zitten terwijl de ScrollView component alles onmiddellijk rendert.
       * Voor grote lijsten resulteert dit in een aanzienlijke performantie-boost.
       * De ScrollView is dus enkel een goed idee als je dingen zoals lange teksten en dergelijke wilt
       * renderen.
       * LegendList is een nog performantere versie van FlatList, hiervoor moet wel een extra library geïnstalleerd
       * worden.
       */}
      <LegendList
        data={filteredTasks}
        renderItem={({item: task}) => <ToDoItem {...task} key={task.id} />}
        keyExtractor={task => task.id.toString()}
        recycleItems={true}
      />
    </>
  )
}

export default ToDoList
