import { ColorName } from '@emotion/react';
import { Fab } from 'components/fab';
import { Image, Row, StyleSystemThemedProps } from 'components/layout';
import { useProfile, useSettings } from 'hooks';
import { Close, Menu } from 'icons';
import { Avatar } from 'components/avatar';
import LogoImage from 'assets/images/logo.png';
import { COLOR_LIGHT } from 'theme';
import { useCallback } from 'react';
import { GestureResponderEvent } from 'react-native';

export const Mobile: React.FC<MobileType> = ({ onPress, ...props }) => {
  const { profile } = useProfile();
  const { isSideBarOpen, setIsSideBarOpen } = useSettings();
  const menuIcon = isSideBarOpen ? <Close colorVariant="white" /> : <Menu colorVariant="white" />;

  const toggleSideBar = useCallback(() => {
    setIsSideBarOpen(!isSideBarOpen);
  }, [isSideBarOpen, setIsSideBarOpen]);

  return (
    <Row
      flexDirection="row"
      alignItems="center"
      justifyContent="space-between"
      flexGrow={1}
      {...props}
    >
      <Fab
        onPress={toggleSideBar}
        variant="plain"
        sizeVariant="medium"
        colorVariant="transparent"
        centerElement={menuIcon}
      />
      <Image height={25} width={79} resizeMode="contain" source={LogoImage} />
      <Avatar
        onPress={onPress}
        title={profile?.name.first}
        uri={profile?.profilePhotoUrl as string}
        titleColor="white"
        sizeVariant="small"
        backgroundColor={COLOR_LIGHT['grey-06'] as ColorName}
      />
    </Row>
  );
};

type MobileType = StyleSystemThemedProps & MobileProps;
interface MobileProps {
  onPress?: ((event: GestureResponderEvent) => void) | undefined;
}