import type { ReactNode } from 'react';
import type { Did } from '@atcute/lexicons';
import { cleanError } from '#/lib/errors';
import { useActorStarterPacksQuery } from '#/state/queries/actor-starter-packs';
import { List } from '#/components/List/List';
import { ListEmpty } from '#/components/List/ListEmpty';
import { ListError } from '#/components/List/ListError';
import * as ListTail from '#/components/List/ListTail';
import {
Default as StarterPackCard,
LoadingPlaceholder as StarterPackLoadingPlaceholder,
} from '#/components/StarterPack/StarterPackCard';
import { Button, ButtonIcon, ButtonText } from '#/components/web/Button';
import PlusIcon from '#/icons/central/PlusSmall_round_outlined_radius1_stroke2.svg';
import CircleAndSquareIcon from '#/icons/original/CircleAndSquare.svg';
import { m } from '#/paraglide/messages';
import { useRouter } from '#/router';
import * as css from './ProfileStarterPacks.css';
const STARTER_PACK_ITEM_HEIGHT_ESTIMATE = 120;
interface ProfileStarterPacksProps {
did: Did;
isMe: boolean;
starterPackCount?: number;
}
export function ProfileStarterPacks({ did, isMe, starterPackCount }: ProfileStarterPacksProps): ReactNode {
const router = useRouter();
const { data, error, fetchNextPage, hasNextPage, isError, isFetchingNextPage, isPending, refetch } =
useActorStarterPacksQuery({ did });
const starterPacks = data?.pages.flatMap((page) => page.starterPacks) ?? [];
if (starterPacks.length < 1) {
if (isError) {
return <ListError hideBackButton message={cleanError(error)} onRetry={() => void refetch()} />;
}
if (isPending) {
return <StarterPackLoadingPlaceholder count={starterPackCount} />;
}
return (
<ListEmpty
icon={CircleAndSquareIcon}
message={isMe ? m['components.starterPack.list.empty']() : m['common.starterPack.empty']()}
button={
isMe
? {
label: m['common.starterPack.action.create'](),
text: m['common.starterPack.action.create'](),
onPress: () => router.navigate({ to: { name: 'StarterPackWizard' } }),
size: 'small',
color: 'primary',
}
: undefined
}
/>
);
}
return (
<List
data={starterPacks}
estimateHeight={STARTER_PACK_ITEM_HEIGHT_ESTIMATE}
keyExtractor={(item) => item.uri}
renderItem={({ index, item }) => <StarterPackCard starterPack={item} topBorder={index !== 0} />}
ListFooterComponent={
isMe && !hasNextPage && !isFetchingNextPage && !isError ? (
<CreateAnother />
) : (
<ListTail.Frame>
{isFetchingNextPage ? (
<ListTail.Pending />
) : isError ? (
<ListTail.Error message={cleanError(error)} onRetry={() => void fetchNextPage()} />
) : null}
</ListTail.Frame>
)
}
onEndReached={() => {
if (isError) {
return;
}
void fetchNextPage();
}}
onEndReachedThreshold={2}
/>
);
}
function CreateAnother() {
const router = useRouter();
return (
<div className={css.createAnother}>
<Button
color="secondary"
label={m['common.starterPack.action.create']()}
onClick={() => router.navigate({ to: { name: 'StarterPackWizard' } })}
size="small"
variant="solid"
>
<ButtonText>{m['components.starterPack.create.another']()}</ButtonText>
<ButtonIcon icon={PlusIcon} />
</Button>
</div>
);
}