import React, { useMemo, useState } from "react";
import { Avatar, Button, ListItem, View, YGroup } from "tamagui";
import MenuButton from "@/components/ui/menu-button";
import Icons from "@/components/ui/icons";
import SearchInput from "@/components/ui/search-input";
import { useTeamId } from "@/stores/auth";
import { changeRoleModal } from "./change-role-form";
import { useRemoveMemberMutation } from "../hooks/query";
import { showDialog } from "@/hooks/useDialog";
type Props = {
members?: any[];
allowWrite?: boolean;
};
const MemberList = ({ members, allowWrite }: Props) => {
const teamId = useTeamId();
const [search, setSearch] = useState("");
const remove = useRemoveMemberMutation(teamId);
const onRemove = (member: any) => {
showDialog({
title: "Remove Member",
description: "Are you sure you want to remove this member?",
onConfirm: () => remove.mutate(member.userId),
});
};
const memberList = useMemo(() => {
let items = members || [];
if (search) {
items = items.filter((item: any) => {
const q = search.toLowerCase();
return (
item.user?.name.toLowerCase().includes(q) ||
item.user?.username.toLowerCase().includes(q) ||
item.user?.email.toLowerCase().includes(q)
);
});
}
return items;
}, [members, search]);
return (
{memberList?.map((member: any) => (
}
iconAfter={
allowWrite ? (
onRemove(member)}
/>
) : undefined
}
/>
))}
);
};
type MemberActionButtonProps = {
member: any;
onRemove: () => void;
};
const MemberActionButton = ({ member, onRemove }: MemberActionButtonProps) => (
}
circular
bg="$colorTransparent"
/>
}
>
}
onPress={() =>
changeRoleModal.onOpen({
teamId: member.teamId,
userId: member.userId,
role: member.role,
})
}
>
Change Role
}
onPress={onRemove}
>
Remove Member
);
export default MemberList;