import { IconButton } from '@rocket.chat/fuselage';
import { useStableCallback } from '@rocket.chat/fuselage-hooks';
import { GenericTableCell, GenericTableRow } from '@rocket.chat/ui-client';
import { useRouter } from '@rocket.chat/ui-contexts';
import { useTranslation } from 'react-i18next';

import { useRemoveUnit } from './useRemoveUnit';

export type UnitsTableRowProps = { _id: string; name: string; visibility: string };

const UnitsTableRow = ({ _id, name, visibility }: UnitsTableRowProps) => {
	const { t } = useTranslation();
	const router = useRouter();

	const onRowClick = useStableCallback((id: string) => () => router.navigate(`/omnichannel/units/edit/${id}`));
	const handleDelete = useRemoveUnit(_id);

	return (
		<GenericTableRow key={_id} tabIndex={0} onClick={onRowClick(_id)} action>
			<GenericTableCell withTruncatedText>{name}</GenericTableCell>
			<GenericTableCell withTruncatedText>{visibility}</GenericTableCell>
			<GenericTableCell>
				<IconButton
					icon='trash'
					small
					title={t('Remove')}
					onClick={(e) => {
						e.stopPropagation();
						handleDelete();
					}}
				/>
			</GenericTableCell>
		</GenericTableRow>
	);
};

export default UnitsTableRow;