import type { IRoom, IUser } from '@rocket.chat/core-typings';
import { ButtonGroup, IconButton, Skeleton } from '@rocket.chat/fuselage';
import { GenericMenu } from '@rocket.chat/ui-client';
import { useMemo } from 'react';
import { useTranslation } from 'react-i18next';

import { UserInfoAction } from '../../../../components/UserInfo';
import { useMemberExists } from '../../../hooks/useMemberExists';
import type { UserInfoAction as UserInfoActionType } from '../../hooks/useUserInfoActions';
import { useUserInfoActions } from '../../hooks/useUserInfoActions';

export type UserInfoActionsProps = {
	user: Pick<IUser, '_id' | 'username' | 'name' | 'freeSwitchExtension'>;
	rid: IRoom['_id'];
	isInvited?: boolean;
	backToList?: () => void;
};

const UserInfoActions = ({ user, rid, isInvited, backToList }: UserInfoActionsProps) => {
	const { t } = useTranslation();
	const {
		data: isMemberData,
		refetch,
		isSuccess: membershipCheckSuccess,
		isPending,
	} = useMemberExists({ roomId: rid, username: user.username as string });

	const isMember = membershipCheckSuccess && isMemberData?.isMember;
	const { _id: userId, username, name, freeSwitchExtension } = user;

	const { actions: actionsDefinition, menuActions: menuOptions } = useUserInfoActions({
		rid,
		user: { _id: userId, username, name, freeSwitchExtension },
		size: 2,
		isMember,
		isInvited,
		reload: () => {
			backToList?.();
			refetch();
		},
	});

	const menu = useMemo(() => {
		if (!menuOptions?.length) {
			return null;
		}

		return (
			<GenericMenu
				button={<IconButton icon='kebab' secondary />}
				title={t('More')}
				key='menu'
				sections={menuOptions}
				placement='bottom-end'
				small={false}
			/>
		);
	}, [menuOptions, t]);

	const actions = useMemo(() => {
		const mapAction = ([key, action]: [string, UserInfoActionType]) => (
			<UserInfoAction key={key} title={action.title} label={action.content} onClick={action.onClick} icon={action.icon ?? 'kebab'} />
		);

		return [...actionsDefinition.map(mapAction), menu].filter(Boolean);
	}, [actionsDefinition, menu]);

	if (isPending) {
		return <Skeleton width='full' />;
	}
	return <ButtonGroup align='center'>{actions}</ButtonGroup>;
};

export default UserInfoActions;