import type {FunctionComponent} from 'react'
import {useState} from 'react'
import type ITask from '@/models/ITask'
import {useRouter} from 'expo-router'
import {HStack} from '@/components/ui/hstack'
import {useTheme} from '@react-navigation/core'
import {
  Actionsheet,
  ActionsheetBackdrop,
  ActionsheetContent,
  ActionsheetDragIndicator,
  ActionsheetDragIndicatorWrapper,
  ActionsheetIcon,
  ActionsheetItem,
  ActionsheetItemText,
} from '@/components/ui/actionsheet'
import {ChevronRight, CircleCheckBigIcon, CircleIcon, EllipsisVertical, Trash} from 'lucide-react-native'
import {Button, ButtonIcon} from '@/components/ui/button'
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 colors from 'tailwindcss/colors'
import {Icon} from '@/components/ui/icon'
import {useDeleteTask, useToggleTaskStatus} from '@/db/tasksAPI'

const ToDoItem: FunctionComponent<ITask> = ({name, id, completed, labels}) => {
  const [showActionSheet, setShowActionSheet] = useState<boolean>(false)
  const {mutate: toggleTaskStatus} = useToggleTaskStatus()
  const {mutate: deleteTask} = useDeleteTask()
  const router = useRouter()
  const theme = useTheme()

  return (
    <>
      <Card size="md" variant="elevated" className="m-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>
              <Button size="lg" className="rounded-full" variant="link" onPress={() => setShowActionSheet(true)}>
                <ButtonIcon
                  as={EllipsisVertical}
                  color={completed ? colors.green['400'] : theme.colors.border}
                  size="lg"
                />
              </Button>
            </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>

      <Actionsheet isOpen={showActionSheet} onClose={() => setShowActionSheet(false)}>
        <ActionsheetBackdrop />
        <ActionsheetContent>
          <ActionsheetDragIndicatorWrapper>
            <ActionsheetDragIndicator />
          </ActionsheetDragIndicatorWrapper>
          <ActionsheetItem
            onPress={() => {
              setShowActionSheet(false)
              toggleTaskStatus({id})
            }}>
            <ActionsheetIcon as={completed ? CircleCheckBigIcon : CircleIcon} size="xl" />
            <ActionsheetItemText size="2xl">
              Mark {name} as {completed ? 'to-do' : 'completed'}
            </ActionsheetItemText>
          </ActionsheetItem>
          <ActionsheetItem
            onPress={() => {
              setShowActionSheet(false)
              deleteTask({id})
            }}>
            <ActionsheetIcon as={Trash} size="xl" />
            <ActionsheetItemText size="2xl">Delete {name}</ActionsheetItemText>
          </ActionsheetItem>
          <ActionsheetItem
            onPress={() => {
              setShowActionSheet(false)
              router.push(`/tasks/${id}`)
            }}>
            <ActionsheetIcon as={ChevronRight} size="xl" />
            <ActionsheetItemText size="2xl">Details</ActionsheetItemText>
          </ActionsheetItem>
        </ActionsheetContent>
      </Actionsheet>
    </>
  )
}

export default ToDoItem
