import { HStack, Box, Flex, useColorModeValue } from '@chakra-ui/react';
import React from 'react';

import { useScrollDirection } from 'lib/contexts/scrollDirection';
import NetworkLogo from 'ui/snippets/networkMenu/NetworkLogo';
import ProfileMenuDesktop from 'ui/snippets/profileMenu/ProfileMenuDesktop';
import ProfileMenuMobile from 'ui/snippets/profileMenu/ProfileMenuMobile';
import SearchBar from 'ui/snippets/searchBar/SearchBar';

import Burger from './Burger';
import ColorModeToggler from './ColorModeToggler';

type Props = {
  isHomePage?: boolean;
  hideOnScrollDown?: boolean;
}

const Header = ({ hideOnScrollDown, isHomePage }: Props) => {
  const bgColor = useColorModeValue('white', 'black');
  const scrollDirection = useScrollDirection();

  return (
    <>
      <Box bgColor={ bgColor } display={{ base: 'block', lg: 'none' }}>
        <Flex
          as="header"
          position="fixed"
          top={ 0 }
          left={ 0 }
          paddingX={ 4 }
          paddingY={ 2 }
          bgColor={ bgColor }
          width="100%"
          alignItems="center"
          justifyContent="space-between"
          zIndex="sticky2"
          transitionProperty="box-shadow"
          transitionDuration="slow"
          boxShadow={ !hideOnScrollDown && scrollDirection === 'down' ? 'md' : 'none' }
        >
          <Burger/>
          <NetworkLogo/>
          <ProfileMenuMobile/>
        </Flex>
        { !isHomePage && <SearchBar withShadow={ !hideOnScrollDown }/> }
      </Box>
      { !isHomePage && (
        <HStack
          as="header"
          width="100%"
          alignItems="center"
          justifyContent="center"
          gap={ 12 }
          display={{ base: 'none', lg: 'flex' }}
          paddingX={ 12 }
          paddingTop={ 9 }
          paddingBottom="52px"
        >
          <Box width="100%">
            <SearchBar/>
          </Box>
          <ColorModeToggler/>
          <ProfileMenuDesktop/>
        </HStack>
      ) }
    </>
  );
};

export default Header;
