import { getProfile } from '@api/user'
import Logo from '@assets/images/logo.svg'
import { useAuth, useSignInUp } from '@hooks/useAuth'
import {
  Avatar,
  Badge,
  Burger,
  Flex,
  Group,
  Image,
  Menu,
  Text,
} from '@mantine/core'
import { notifications } from '@mantine/notifications'
import { PathConstants } from '@routes/routes'
import {
  IconAt,
  IconCircleXFilled,
  IconLogout,
  IconUserCircle,
} from '@tabler/icons-react'
import { useEffect } from 'react'
import { useTranslation } from 'react-i18next'
import { Link } from 'react-router-dom'

async function getData(t, setUserInfo) {
  try {
    const resp = await getProfile()
    if (resp.status === 200) {
      setUserInfo(resp.data)
    }
  } catch (error) {
    notifications.show({
      color: 'red.5',
      icon: <IconCircleXFilled />,
      withCloseButton: true,
      title: t('message_api_call_fail'),
    })
  }
}

export default function Header({ opened, onClick }) {
  const { auth, setAuth, setUserInfo } = useAuth()
  const { t } = useTranslation()
  const { onLogout } = useSignInUp(setAuth)

  useEffect(() => {
    if (auth.isLogged) {
      getData(t, setUserInfo)
    }
  }, [auth.isLogged])

  const logOut = async () => {
    try {
      await onLogout()
    } catch (error) {
      notifications.show({
        color: 'red.5',
        icon: <IconCircleXFilled />,
        withCloseButton: true,
        title: t('message_logout_fail'),
      })
    }
  }

  return (
    <Flex h="100%" p="md" bg="cyan" justify="space-between">
      <Link to="/">
        <Group gap={10}>
          <Image src={Logo} alt="logo" h={30} />
          <Text c="white" size="xl" lh="1" fw="bold">
            Fuware
          </Text>
        </Group>
      </Link>
      {auth.isLogged && (
        <Flex align="center" gap={10}>
          <Menu
            trigger="hover"
            position="bottom-end"
            width={150}
            visibleFrom="md"
          >
            <Menu.Target>
              <Avatar
                size="30"
                variant="filled"
                name={auth.userInfo?.name}
                color="red.4"
                style={{ cursor: 'pointer' }}
              />
            </Menu.Target>
            <Menu.Dropdown>
              <Menu.Label>
                <Badge
                  leftSection={<IconAt size={12} />}
                  size="sm"
                  color="yellow.8"
                >
                  {auth.userInfo?.name}
                </Badge>
              </Menu.Label>
              <Menu.Divider />
              <Menu.Item
                leftSection={<IconUserCircle size={15} />}
                component={Link}
                to={PathConstants.PROFILE}
              >
                {t('ui_profile')}
              </Menu.Item>
              <Menu.Item
                leftSection={<IconLogout size={15} />}
                fw="500"
                onClick={logOut}
              >
                {t('ui_logout')}
              </Menu.Item>
            </Menu.Dropdown>
          </Menu>
          <Burger
            opened={opened}
            onClick={onClick}
            color="white"
            hiddenFrom="md"
            size="sm"
          />
        </Flex>
      )}
    </Flex>
  )
}
