import { Container, Row, StyleSystemThemedProps } from 'components/layout';
import { useResponsiveLayout, useRouting } from 'hooks';
import { Bell, Chat, Ellipse, SearchIcon } from 'icons';
import { Button } from 'components/button';
import { metrics } from 'config';
import { useCallback } from 'react';
import { NavigationRoutes } from 'navigation/enum';
const { STYLES } = metrics;
export const BottomBar: React.FC<TopBarType> = ({ ...props }) => {
  const { width } = useResponsiveLayout();
  const { navigateTo } = useRouting();

  const perButtonWidth = width / 3;

  const doNavigateTo = useCallback(
    (route: any) => {
      navigateTo(route);
    },
    [navigateTo]
  );

  return (
    <Container
      borderTopWidth={1}
      borderTopColor="divider"
      height={STYLES.bottomBarHeight}
      {...props}
    >
      <Row alignItems="center">
        <Button
          onPress={() => doNavigateTo(NavigationRoutes.Notification)}
          flexGrow={1}
          width={perButtonWidth}
          sizeVariant="2-extra-large"
          shapeVariant="square"
          centerElement={
            <Container>
              <Bell height={20} width={20} />
              <Container position="absolute" bottom={-10} alignSelf="center">
                <Ellipse colorVariant="secondary" />
              </Container>
            </Container>
          }
        />
        <Button
          onPress={() => doNavigateTo(NavigationRoutes.Rooms)}
          sizeVariant="2-extra-large"
          width={perButtonWidth}
          flexGrow={1}
          shapeVariant="square"
          centerElement={<Chat colorVariant="body" height={20} width={20} />}
        />

        <Button
          onPress={() => doNavigateTo(NavigationRoutes.Notification)}
          shapeVariant="square"
          sizeVariant="2-extra-large"
          width={perButtonWidth}
          flexGrow={1}
          centerElement={<SearchIcon colorVariant="body" width={22} height={22} />}
        />
      </Row>
    </Container>
  );
};

type TopBarType = StyleSystemThemedProps & {};