import type { ComponentType, MouseEvent, SVGProps } from 'react';
import { softReset } from '#/state/events';
import { useUnreadMessageCount } from '#/state/queries/messages/get-unread-counts';
import { useUnreadNotifications } from '#/state/queries/notifications/unread';
import { useSession } from '#/state/session';
import { signinDialogHandle } from '#/components/dialogs/handles';
import { Text } from '#/components/Text';
import { Button, ButtonText } from '#/components/web/Button';
import { isModifiedClick, Link } from '#/components/web/Link';
import Logo from '#/icons/brands/Bluesky.svg';
import Logotype from '#/icons/brands/BlueskyLogotype.svg';
import BellFilled from '#/icons/central/Bell_round_filled_radius1_stroke2.svg';
import Bell from '#/icons/central/Bell_round_outlined_radius1_stroke2.svg';
import MessageFilled from '#/icons/central/BubbleAnnotation3_round_filled_radius1_stroke2.svg';
import Message from '#/icons/central/BubbleAnnotation3_round_outlined_radius1_stroke2.svg';
import HomeFilled from '#/icons/central/HomeOpen_round_filled_radius1_stroke2.svg';
import Home from '#/icons/central/HomeOpen_round_outlined_radius1_stroke2.svg';
import MagnifyingGlassFilled from '#/icons/central/MagnifyingGlass_round_filled_radius1_stroke2.svg';
import MagnifyingGlass from '#/icons/central/MagnifyingGlass_round_outlined_radius1_stroke2.svg';
import { m } from '#/paraglide/messages';
import { type RouteTarget, useRouter, useTarget } from '#/router';
import * as css from './BottomBar.css';
export function BottomBar() {
const { hasSession } = useSession();
const unreadMessageCount = useUnreadMessageCount();
const notificationCountStr = useUnreadNotifications();
return (
<nav className={css.bottomBar}>
{hasSession ? (
<>
<NavItem to={{ name: 'Home' }} icons={{ active: HomeFilled, inactive: Home }} />
<NavItem
to={{ name: 'Explore' }}
icons={{ active: MagnifyingGlassFilled, inactive: MagnifyingGlass }}
/>
<NavItem
to={{ name: 'Notifications' }}
icons={{ active: BellFilled, inactive: Bell }}
notificationCount={notificationCountStr}
/>
<NavItem
to={{ name: 'Messages' }}
hasNew={unreadMessageCount.hasNew}
icons={{ active: MessageFilled, inactive: Message }}
notificationCount={unreadMessageCount.numUnread}
/>
</>
) : (
<div className={css.signInRow}>
<div className={css.logoGroup}>
<Logo className={css.logo} />
<div className={css.logotypeWrapper}>
<Logotype className={css.logotype} />
</div>
</div>
<Button
onClick={() => signinDialogHandle.openWithPayload({})}
label={m['common.session.action.signIn']()}
size="small"
variant="solid"
color="primary"
>
<ButtonText>{m['common.session.action.signIn']()}</ButtonText>
</Button>
</div>
)}
</nav>
);
}
interface NavItemProps {
hasNew?: boolean;
icons: {
active: ComponentType<SVGProps<SVGSVGElement>>;
inactive: ComponentType<SVGProps<SVGSVGElement>>;
};
notificationCount?: string;
to: RouteTarget;
}
function NavItem({ hasNew, icons, notificationCount, to }: NavItemProps) {
const routeName = to.name;
const router = useRouter();
const target = useTarget();
const isActive = target.name === routeName;
const onPress = (e: MouseEvent<HTMLElement>) => {
if (isModifiedClick(e)) {
return;
}
if (isActive) {
softReset.emit();
return false;
}
router.popTo(to);
return false;
};
const Icon = isActive ? icons.active : icons.inactive;
return (
<Link to={to} onPress={onPress} label={routeName} className={css.ctrl}>
<Icon aria-hidden={true} className={css.navIcon} />
{notificationCount ? (
<Text
size="sm"
weight="semiBold"
color="white"
className={css.badge}
aria-label={m['view.notifications.unreadCount.badge']({ count: notificationCount })}
>
{notificationCount}
</Text>
) : hasNew ? (
<div className={css.hasNewBadge} />
) : null}
</Link>
);
}