import {FunctionComponent} from 'react'

import {useSignOut} from '@/api/auth'
import useUser from '@/hooks/useUser'
import {Button, ButtonIcon, ButtonText} from '@/components/ui/button'
import {LogOut} from 'lucide-react-native'
import {Input, InputField} from '@/components/ui/input'
import {VStack} from '@/components/ui/vstack'
import {Redirect} from 'expo-router'

const Account: FunctionComponent = () => {
  const user = useUser()
  const {mutate: signOut} = useSignOut()

  if (!user) {
    return <Redirect href="/(tabs)/login" />
  }

  return (
    <VStack className="items-center gap-4">
      <VStack className="gap-4 w-full">
        <Input isDisabled={true} className="mx-4">
          <InputField value={user?.username ?? 'Anonymous'} />
        </Input>
        <Input isDisabled className="mx-4">
          <InputField value={user?.email} />
        </Input>

        <Button variant="outline" onPress={() => signOut()} className="mx-4">
          <ButtonIcon as={LogOut} />
          <ButtonText>Logout</ButtonText>
        </Button>
      </VStack>
    </VStack>
  )
}

export default Account
