import type { ReactNode } from 'react';
import { cleanError } from '#/lib/errors';
import { type MyListsFilter, useMyListsQuery } from '#/state/queries/my-lists';
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 * as ListCard from '#/components/ListCard';
import ListIcon from '#/icons/central/BulletList_round_outlined_radius1_stroke2.svg';
import { m } from '#/paraglide/messages';
const LIST_ITEM_HEIGHT_ESTIMATE = 120;
/** Renders the viewer's own lists, one {@link ListCard.Default} row per list. */
export function MyLists({ filter }: { filter: MyListsFilter }): ReactNode {
const { data, error, isError, isPending, refetch } = useMyListsQuery(filter);
const emptyText = (() => {
switch (filter) {
case 'curate': {
return m['common.list.description']();
}
case 'mod': {
return m['common.list.moderation.description']();
}
default: {
return m['common.list.empty']();
}
}
})();
const lists = data ?? [];
if (lists.length < 1) {
if (isError) {
return <ListError hideBackButton message={cleanError(error)} onRetry={() => void refetch()} />;
}
if (isPending) {
return <ListCard.LoadingPlaceholder count={10} />;
}
return <ListEmpty icon={ListIcon} iconColor="textContrastMedium" message={emptyText} />;
}
return (
<List
data={lists}
estimateHeight={LIST_ITEM_HEIGHT_ESTIMATE}
keyExtractor={(item) => item.uri}
renderItem={({ index, item }) => <ListCard.Default topBorder={index !== 0} view={item} />}
ListFooterComponent={<ListTail.Frame />}
/>
);
}