import * as React from 'react';

import get from 'lodash/get';
import { useObservableState, useSubscription, useObservableEagerState } from 'observable-hooks';
import { debounceTime, skip } from 'rxjs';
import { useTheme } from 'styled-components/native';

import Box from '@wcpos/components/src/box';
import ErrorBoundary from '@wcpos/components/src/error-boundary';
import Loader from '@wcpos/components/src/loader';
import Suspense from '@wcpos/components/src/suspense';
import Table, { TableContextProps, CellRenderer } from '@wcpos/components/src/table';
import Text from '@wcpos/components/src/text';
import type {
	ProductDocument,
	OrderDocument,
	CustomerDocument,
	TaxRateDocument,
} from '@wcpos/database';
import { useReplicationState, Query, useInfiniteScroll } from '@wcpos/query';
import logger from '@wcpos/utils/src/logger';

import EmptyTableRow from './empty-table-row';
import SyncButton from './sync-button';
import TextCell from './text-cell';
import { useT } from '../../../contexts/translations';
import { useUISettings, UISettingID } from '../contexts/ui-settings';
import { useCollectionReset } from '../hooks/use-collection-reset';

type DocumentType = ProductDocument | OrderDocument | CustomerDocument | TaxRateDocument;

interface CommonTableProps<T> {
	id: UISettingID;
	query: Query<any>;
	cells: Record<string, React.FC<any>>;
	renderItem?: (props: any) => JSX.Element;
	noDataMessage: string;
	estimatedItemSize: number;
	extraContext?: Partial<TableContextProps<T>>;
	footer?: React.ReactNode;
}

/**
 *
 */
const DataTableFooter = ({ query, children, count }) => {
	const theme = useTheme();
	const { sync, active$, total$ } = useReplicationState(query);
	const { clear } = useCollectionReset(query.collection.name);
	const loading = useObservableState(active$, false);
	const total = useObservableState(total$, 0);
	const t = useT();

	return (
		<Box
			horizontal
			style={{
				width: '100%',
				backgroundColor: theme.colors.lightGrey,
				borderBottomLeftRadius: theme.rounding.medium,
				borderBottomRightRadius: theme.rounding.medium,
				borderTopWidth: 1,
				borderTopColor: theme.colors.grey,
			}}
		>
			{children}
			<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={loading} />
			</Box>
		</Box>
	);
};

/**
 * Loading row should be separate from the table component to check loading state from the DataTable
 */
const LoadingRow = ({ query }) => {
	const { active$ } = useReplicationState(query);
	const loading = useObservableState(active$, false);

	return <Table.LoadingRow loading={loading} />;
};

/**
 *
 */
const DataTable = <T extends DocumentType>({
	id,
	query,
	cells,
	renderItem,
	noDataMessage = 'No record found',
	estimatedItemSize,
	extraContext,
	footer,
}: CommonTableProps<T>) => {
	const { uiSettings, getUILabel } = useUISettings(id);
	const columns = useObservableEagerState(uiSettings.columns$);
	const result = useInfiniteScroll(query);
	const { sortBy, sortDirection } = useObservableState(query.params$, query.getParams());
	const listRef = React.useRef();

	/**
	 *
	 */
	const cellRenderer = React.useCallback<CellRenderer<{ document: T }>>(
		({ item, column, index }) => {
			const Cell = get(cells, [column.key]);

			if (Cell) {
				return (
					<ErrorBoundary>
						<Suspense>
							<Cell item={item.document} column={column} index={index} />
						</Suspense>
					</ErrorBoundary>
				);
			}

			return <TextCell item={item.document} column={column} />;
		},
		[cells]
	);

	/**
	 *
	 */
	const context = React.useMemo(() => {
		return {
			columns: columns.filter((column) => column.show),
			sort: result.searchActive
				? null
				: ({ sortBy, sortDirection }) => query.sort(sortBy, sortDirection),
			sortBy,
			sortDirection,
			cellRenderer,
			headerLabel: ({ column }) => getUILabel(column.key),
			query,
			...extraContext,
		};
	}, [
		columns,
		result.searchActive,
		sortBy,
		sortDirection,
		cellRenderer,
		query,
		extraContext,
		getUILabel,
	]);

	/**
	 * If the query params change, we should scroll to top
	 * - debounceTime so we don't flash the old results
	 */
	useSubscription(query.params$.pipe(skip(1), debounceTime(10)), () => {
		if (listRef?.current) {
			listRef.current?.scrollToOffset({ offset: 0, animated: false });
		}
	});

	/**
	 *
	 */
	return (
		<Table
			ref={listRef}
			data={result.hits}
			renderItem={renderItem}
			estimatedItemSize={estimatedItemSize}
			context={context}
			ListEmptyComponent={<EmptyTableRow message={noDataMessage} />}
			onEndReached={() => result.nextPage()}
			onEndReachedThreshold={0.5}
			footer={<DataTableFooter query={query} children={footer} count={result.count} />}
			ListFooterComponent={<LoadingRow query={query} />}
		/>
	);
};

export default DataTable;