import {useNavigation, usePathname, useRouter} from 'expo-router'
import {FunctionComponent, useEffect, useState} from 'react'

import {useRealtimePrivateChannels, useRealtimePublicChannels} from '@/api/channels'
import {Drawer, DrawerBackdrop, DrawerBody, DrawerContent, DrawerHeader} from '@/components/ui/drawer'
import {Menu} from 'lucide-react-native'
import {Button, ButtonIcon, ButtonText} from '@/components/ui/button'
import {Heading} from '@/components/ui/heading'
import {Text} from '@/components/ui/text'
import {useTheme} from '@react-navigation/core'
import {HStack} from '@/components/ui/hstack'
import {CloseIcon, Icon} from '@/components/ui/icon'

const ChatSideMenu: FunctionComponent = () => {
  const navigation = useNavigation()
  const [visible, setVisible] = useState<boolean>(false)
  const router = useRouter()
  const publicChannels = useRealtimePublicChannels()
  const privateChannels = useRealtimePrivateChannels()
  const path = usePathname()
  const theme = useTheme()

  useEffect(() => {
    navigation.setOptions({
      headerLeft: ({tintColor}: {tintColor: string}) => (
        <Button className="me-4" variant="link" onPress={() => setVisible(x => !x)}>
          <ButtonIcon as={Menu} color={tintColor} size={25} />
        </Button>
      ),
    })
  }, [navigation])

  return (
    <Drawer isOpen={visible} onClose={() => setVisible(false)}>
      <DrawerBackdrop />
      <DrawerContent className="w-[75%] mt-12" style={{backgroundColor: theme.colors.card}}>
        <DrawerHeader>
          <HStack className="w-[75%]">
            <Heading size="2xl">Public Channels</Heading>
            <Button variant="link" onPress={() => setVisible(false)}>
              <Icon as={CloseIcon} size={25} />
            </Button>
          </HStack>
        </DrawerHeader>

        <DrawerBody className="flex-grow-0">
          {publicChannels?.map(channel => (
            <Button
              className="justify-start"
              variant="link"
              onPress={() => {
                router.navigate({pathname: '/chat/[channel]', params: {channel: channel.name}})
                setVisible(false)
              }}
              key={channel.id}>
              <ButtonText>{channel.name}</ButtonText>
            </Button>
          ))}
        </DrawerBody>

        <DrawerHeader>
          <Heading size="2xl">Private Channels</Heading>
        </DrawerHeader>
        <DrawerBody className="flex-grow-0">
          {privateChannels?.length > 0 ? (
            privateChannels?.map(channel => (
              <Button
                className="justify-start"
                variant="link"
                onPress={() => {
                  router.navigate({pathname: '/chat/[channel]', params: {channel: channel.name}})
                  setVisible(false)
                }}
                key={channel.id}>
                <ButtonText>{channel.name}</ButtonText>
              </Button>
            ))
          ) : (
            <Text>No private channels</Text>
          )}
        </DrawerBody>

        <DrawerHeader>
          <Heading size="2xl">Settings</Heading>
        </DrawerHeader>
        <DrawerBody>
          <Button
            variant="link"
            className="justify-start"
            onPress={() => {
              if (path !== '/chat/newChannel') {
                router.push('/chat/newChannel')
              }
              setVisible(false)
            }}>
            <ButtonText>Create Channel</ButtonText>
          </Button>
        </DrawerBody>
      </DrawerContent>
    </Drawer>
  )
}

export default ChatSideMenu
