import { ColorName } from '@emotion/react';
import { Container, Row, StyleSystemThemedProps } from 'components/layout';
import { useResponsiveLayout, useTheme } from 'hooks';
import { Visible } from 'components';
import { metrics } from 'config';
import { useCallback, useState } from 'react';
import { Mobile } from 'components/top-bar';
import { Portal } from '@gorhom/portal';
import { ProfileAction } from 'components/sheets';
const { STYLES } = metrics;

export const TopBar: React.FC<TopBarType> = ({
  leftElement,
  centerElement,
  rightElement,
  isStatusBarIncluded,
  ...props
}) => {
  const { theme, activeThemeMode } = useTheme();
  const { top, isMobile } = useResponsiveLayout();
  const [isSheetOpen, setIsSheetOpen] = useState(false);

  const statusHeight = isStatusBarIncluded ? top + STYLES.topBarHeight : STYLES.topBarHeight;
  const paddingTop = isStatusBarIncluded ? top : 0;

  const backgroundColor = (
    activeThemeMode === 'dark' ? theme.colors['base-01'] : theme.colors['grey-07']
  ) as ColorName;

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

  return (
    <Container
      flexDirection="row"
      alignItems="center"
      paddingTop={paddingTop}
      justifyContent="space-between"
      height={statusHeight}
      px="xs"
      borderLeftColor={'divider-01'}
      borderLeftWidth={1}
      backgroundColor={backgroundColor}
      {...props}
    >
      <Visible if={!isMobile}>
        <>
          <Row flexDirection="row" alignItems="center" justifyContent="space-between" flexGrow={1}>
            <Visible if={!!leftElement}>
              <Container>{leftElement}</Container>
            </Visible>
            <Visible if={!!centerElement}>
              <Container>{centerElement}</Container>
            </Visible>

            <Visible if={!!rightElement}>
              <Container>{rightElement}</Container>
            </Visible>
          </Row>
        </>
      </Visible>
      <Visible if={isMobile}>
        <Mobile onPress={toggleBottomSheet} />
      </Visible>
      <Portal>
        <ProfileAction isSheetOpen={isSheetOpen} setIsSheetOpen={setIsSheetOpen} />
      </Portal>
    </Container>
  );
};

type TopBarType = StyleSystemThemedProps & TopBarProps;
export interface TopBarProps {
  isStatusBarIncluded?: boolean;
  centerElement?: JSX.Element;
  leftElement?: JSX.Element;
  rightElement?: JSX.Element;
}