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

import ScrollDirectionContext from 'ui/ScrollDirectionContext';
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');

  return (
    <ScrollDirectionContext.Consumer>
      { (scrollDirection) => (
        <>
          <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>
          ) }
        </>
      ) }
    </ScrollDirectionContext.Consumer>
  );
};

export default Header;
