import { Autocomplete, Avatar, Box, Burger, Button, Group, Text } from '@mantine/core';
import { useDisclosure, useMediaQuery, useToggle } from '@mantine/hooks';
import classes from './Header.module.css';
import { HeaderModal } from '@components/Header/HeaderModal.tsx';
import { notifications } from '@mantine/notifications';
import { login, logout, register } from '@lib/account.ts';
import HeaderUser from '@components/Header/HeaderUser.tsx';
import { useUserContext } from '@components/context/UserContext.tsx';
import { Link } from 'react-router';

// const links = [
//   { link: '/', label: 'Map' },
//   { link: '/airports', label: 'Airports' },
//   { link: '/metars', label: 'Metars' }
// ];

export function Header() {
  const { user, setUser } = useUserContext();
  const [opened, { toggle }] = useDisclosure(false);
  const [modalType, modalToggle] = useToggle([undefined, 'login', 'register', 'reset']);
  const isMobile = useMediaQuery('(max-width: 768px)');
  // const [active, setActive] = useState(links[0].link);

  // const navItems = links.map((link) => (
  //   <a
  //     key={link.label}
  //     href={link.link}
  //     className={classes.link}
  //     data-active={active === link.link || undefined}
  //     onClick={(event) => {
  //       event.preventDefault();
  //       setActive(link.link);
  //     }}
  //   >
  //     {link.label}
  //   </a>
  // ));

  async function loginUser({ email, password }: { email: string; password: string }): Promise<boolean> {
    const loginResponse = await login(email, password);
    if (loginResponse) {
      setUser(loginResponse);
      notifications.show({
        title: `Welcome back ${loginResponse.first_name}!`,
        message: `You have been logged in.`,
        color: 'green',
        autoClose: 2000,
        loading: false
      });
      return true;
    } else {
      notifications.show({
        title: `Unable to Login`,
        message: `Please try again.`,
        color: 'red',
        autoClose: 2000,
        loading: false
      });
    }
    return false;
  }

  async function logoutUser(): Promise<void> {
    await logout();
    setUser(undefined);
    window.location.reload();
  }

  async function registerUser({
    firstName,
    lastName,
    email,
    password
  }: {
    firstName: string;
    lastName: string;
    email: string;
    password: string;
  }): Promise<boolean> {
    const id = notifications.show({
      loading: true,
      title: `Creating account`,
      message: `Please wait...`,
      autoClose: false,
      withCloseButton: false
    });
    const registerResponse = await register({
      first_name: firstName,
      last_name: lastName,
      email: email,
      password: password
    });
    if (registerResponse) {
      const loginResponse = await login(email, password);
      if (loginResponse) {
        setUser(loginResponse);
        notifications.update({
          id,
          title: `Account created`,
          message: `Welcome ${loginResponse.first_name}!`,
          color: 'green',
          autoClose: 2000,
          loading: false
        });
        return true;
      } else {
        notifications.update({
          id,
          title: `Unable to Login`,
          message: `Please try again.`,
          color: 'red',
          autoClose: 2000,
          loading: false
        });
      }
    } else {
      notifications.update({
        id,
        title: `Unable to Register`,
        message: `Please try again.`,
        color: 'error',
        autoClose: 2000,
        loading: false
      });
    }
    return false;
  }

  return (
    <>
      <Box>
        <header className={classes.header}>
          <Group justify='space-between' h='100%'>
            <Group align='center' gap='xs'>
              <Link to='/'>
                <Avatar src='/logo.svg' alt='logo' onClick={toggle} />
              </Link>
              <Text size={'xl'}>Aviation Data</Text>
            </Group>
            {/*<Group gap={5} visibleFrom='sm' className={classes.navGroup}>*/}
            {/*  {navItems}*/}
            {/*</Group>*/}
            {!isMobile && (
              <Group align='center' gap='xs'>
                <Autocomplete placeholder={'Enter airport name or ICAO'} limit={5} />
                {user ? (
                  <HeaderUser user={user} profilePicture={undefined} logout={logoutUser} />
                ) : (
                  <Group className={'user'}>
                    <Button variant='default' onClick={() => modalToggle('login')}>
                      Login
                    </Button>
                    <Button onClick={() => modalToggle('register')}>Signup</Button>
                  </Group>
                )}
              </Group>
            )}
            {isMobile && <Burger opened={opened} onClick={toggle} size='sm' />}
          </Group>
        </header>
      </Box>
      <HeaderModal type={modalType} toggle={modalToggle} login={loginUser} register={registerUser} />
    </>
  );
}
