import * as React from 'react';

import { useObservableState } from 'observable-hooks';

import Box from '@wcpos/components/src/box';
import Text from '@wcpos/components/src/text';
import { useReplicationState } from '@wcpos/query';

import { useT } from '../../../contexts/translations';
import SyncButton from '../components/sync-button';
import { useCollectionReset } from '../hooks/use-collection-reset';

const TaxRatesFooter = ({ count, query }) => {
	const { sync, active$, total$ } = useReplicationState(query);
	const { clear } = useCollectionReset(query.collection.name);
	const active = useObservableState(active$, false);
	const total = useObservableState(total$, 0);
	const t = useT();

	return (
		<Box fill horizontal padding="small" space="xSmall" align="center" distribution="end">
			<Text size="small">{t('Showing {count} of {total}', { count, total, _tags: 'core' })}</Text>
			<SyncButton sync={sync} clear={clear} active={active} />
		</Box>
	);
};

export default TaxRatesFooter;