import { Container, Row, StyleSystemThemedProps } from 'components/layout';
import { useProfile, useResponsiveLayout, useSettings } from 'hooks';
import { Close, CollapseBack, MenuArrow } from 'icons';
import { useCallback, useState } from 'react';
import { metrics } from 'config';
import { Visible, Divider, Avatar, TouchableTile } from 'components';
import { Mobile } from 'components/top-bar';
import { COLOR_VALUES } from 'theme/color';
import { ColorName } from '@emotion/react';
import { isProfileActionOpenVar } from 'state-management/dialogs';

const { STYLES } = metrics;

export const Header: React.FC<HeaderType> = ({ ...props }) => {
  const { isSideBarOpen, setIsSideBarOpen, isSideBarCollapsed, setIsSideBarCollapsed } =
    useSettings();

  const { isDesktop, isMobile } = useResponsiveLayout();
  const { profile } = useProfile();

  const [isSheetOpen, setIsSheetOpen] = useState(false);

  const isOpenMobile = !isDesktop && isSideBarOpen;
  const isCollapseOnDesktop = isSideBarCollapsed && !isOpenMobile;

  const flexDirection = isSideBarCollapsed ? 'column-reverse' : 'row';
  const height = isSideBarCollapsed ? 120 : STYLES.topBarHeight;

  const marginTop = isSideBarCollapsed ? 7 : 0;

  const toggleBottomSheet = useCallback(() => {
    isProfileActionOpenVar(true);
    setIsSheetOpen(!isSheetOpen);
  }, [isSheetOpen]);

  const MenuIcon = () => {
    return (
      <>
        <Visible if={isOpenMobile}>
          <Close colorVariant="title" />
        </Visible>
        <Visible if={isCollapseOnDesktop}>
          <MenuArrow colorVariant="body" />
        </Visible>
        <Visible if={!isCollapseOnDesktop}>
          <CollapseBack colorVariant="body" />
        </Visible>
      </>
    );
  };
  const toggleSideBar = useCallback(() => {
    if (isDesktop) {
      setIsSideBarCollapsed(!isSideBarCollapsed);
    } else {
      setIsSideBarOpen(!isSideBarOpen);
    }
  }, [isDesktop, isSideBarCollapsed, isSideBarOpen, setIsSideBarCollapsed, setIsSideBarOpen]);

  return (
    <Container
      flexDirection={flexDirection}
      alignItems="center"
      justifyContent="space-between"
      height={height}
      marginTop={marginTop}
      px="s"
      {...props}
    >
      <Visible if={isSideBarCollapsed}>
        <Container mt="m" mb="s" width={20}>
          <Divider colorVariant="divider" size={1} directionVariant="horizontal" />
        </Container>
      </Visible>

      <Row flexDirection="row" alignItems="center" justifyContent="space-between">
        <Row alignItems="center">
          <Avatar
            onPress={toggleBottomSheet}
            sizeVariant="extra-small"
            title={profile?.name.first}
            uri={profile?.profilePhotoUrl as string}
            titleColor="white"
            titleVariant="caption"
            backgroundColor={COLOR_VALUES.light['grey-06'] as ColorName}
          />
        </Row>
      </Row>
      <TouchableTile
        onPress={toggleSideBar}
        sizeVariant="medium"
        shapeVariant="round"
        variant="text"
        centerElement={<MenuIcon />}
      />

      <Visible if={isMobile}>
        <Mobile onPress={toggleBottomSheet} />
      </Visible>
    </Container>
  );
};

type HeaderType = StyleSystemThemedProps & {};