import type {FunctionComponent} from 'react'
import type {ITask} from '@/models/ITask'
import {useRouter} from 'expo-router'
import {HStack} from '@/components/ui/hstack'
import {ChevronRight, Circle, CircleCheckBig, CircleCheckBigIcon, CircleIcon, Trash} from 'lucide-react-native'
import {LegendList} from '@legendapp/list'
import {VStack} from '@/components/ui/vstack'
import {Card} from '@/components/ui/card'
import {Heading} from '@/components/ui/heading'
import {Badge, BadgeText} from '@/components/ui/badge'
import {Icon} from '@/components/ui/icon'
import {useDeleteTask, useToggleTaskStatus} from '@/db/tasksAPI'
import SwipeableListItem from '@/components/custom/swipeableListItem'
import {View} from 'react-native'

const ToDoItem: FunctionComponent<ITask> = ({name, id, completed, labels}) => {
  const {mutate: toggleTaskStatus} = useToggleTaskStatus()
  const {mutate: deleteTask} = useDeleteTask()
  const router = useRouter()

  const actions = [
    {
      icon: completed ? CircleCheckBig : Circle,
      onPress: () => toggleTaskStatus({id}),
    },
    {
      icon: Trash,
      onPress: () => deleteTask({id}),
    },
    {
      icon: ChevronRight,
      onPress: () => router.push(`/tasks/${id}`),
    },
  ]

  return (
    <SwipeableListItem actionButtons={actions}>
      <View className="w-full my-2">
        <Card size="md" variant="elevated" className="mx-2" style={{maxWidth: '100%'}}>
          <HStack className="flex items-center gap-4" style={{maxWidth: '100%'}}>
            <Icon as={completed ? CircleCheckBigIcon : CircleIcon} size="xl" />
            <VStack className="flex-grow" style={{maxWidth: '90%'}}>
              <HStack className="justify-between items-center">
                <Heading size="md" className="mb-1">
                  {name}
                </Heading>
              </HStack>
              {labels && labels.length > 0 && (
                <LegendList
                  className="h-8 my-2"
                  data={labels}
                  horizontal={true}
                  renderItem={item => (
                    <Badge size="md" variant="solid" action="muted" className="me-2 rounded-lg">
                      <BadgeText style={{color: item.item.color}}>{item.item.name}</BadgeText>
                    </Badge>
                  )}
                />
              )}
            </VStack>
          </HStack>
        </Card>
      </View>
    </SwipeableListItem>
  )
}

export default ToDoItem
