1import {
 2    ToggleGroup, ToggleGroupItem,
 3    Table, TableHeader, TableRow, TableBody, TableHead,
 4    ScrollArea, Button,
 5} from "@marzneshin/common/components";
 6import { useScreenBreakpoint } from "@marzneshin/common/hooks";
 7import { cn } from "@marzneshin/common/utils";
 8import {
 9    SidebarEntityCard,
10} from "@marzneshin/libs/entity-table/components";
11import {
12    useEntityTableContext,
13    useSidebarEntityTableContext
14} from "@marzneshin/libs/entity-table/contexts";
15import { useTranslation } from "react-i18next";
16
17export const SidebarEntitySelection = () => {
18    const {
19        sidebarEntityId,
20        sidebarEntities,
21        setSidebarEntityId,
22        sidebarCardProps,
23    } = useSidebarEntityTableContext()
24    const { table } = useEntityTableContext()
25    const isDesktop = useScreenBreakpoint("md");
26
27    const scrollBarHeight = (table.getState().pagination.pageSize <= 10 && isDesktop) ? "max-h-[45rem]" : "max-h-[20rem]"
28    const { t } = useTranslation();
29
30    return (
31        <Table className="w-full">
32            <TableHeader>
33                <TableRow>
34                    <TableHead className="hstack justify-between items-center">
35                        {t("inbounds")}
36                        <Button
37                            variant="ghost"
38                            size="sm"
39                            className="p-1"
40                            onMouseDown={() => setSidebarEntityId(undefined)}
41                        >
42                            {t('deselect')}
43                        </Button>
44                    </TableHead>
45                </TableRow>
46            </TableHeader>
47            <TableBody>
48                <ToggleGroup
49                    type="single"
50                    onValueChange={(value) => setSidebarEntityId(value === "" ? undefined : value)}
51                    defaultValue={String(sidebarEntityId)}
52                >
53                    <ScrollArea className={cn("flex flex-col justify-start p-1 gap-3 h-full w-full", scrollBarHeight)}>
54                        {sidebarEntities.map((entity: any) => (
55                            <ToggleGroupItem
56                                className="px-0 w-full h-30"
57                                value={String(entity.id)}
58                                key={String(entity.id)}
59                                id={String(entity.id)}>
60                                <SidebarEntityCard
61                                    {...sidebarCardProps}
62                                    entity={entity}
63                                    checked={sidebarEntityId === String(entity.id)}
64                                />
65                            </ToggleGroupItem>
66                        ))}
67                    </ScrollArea>
68                </ToggleGroup>
69            </TableBody>
70        </Table>
71    )
72}