import * as React from 'react';

import { useObservableEagerState } from 'observable-hooks';

import ErrorBoundary from '@wcpos/components/src/error-boundary';
import Table, { TableContextProps } from '@wcpos/components/src/table';

import { FeeLineRow } from './rows/fee-line';
import { LineItemRow } from './rows/line-item';
import { ShippingLineRow } from './rows/shipping-line';
import { useT } from '../../../../contexts/translations';
import EmptyTableRow from '../../components/empty-table-row';
import { useUISettings } from '../../contexts/ui-settings';
import { useCartLines, CartLine } from '../hooks/use-cart-lines';
import { getUuidFromLineItemMetaData } from '../hooks/utils';

const TABLE_ROW_COMPONENTS = {
	line_items: LineItemRow,
	fee_lines: FeeLineRow,
	shipping_lines: ShippingLineRow,
};

/**
 *
 */
const CartTable = () => {
	const { uiSettings, getUILabel } = useUISettings('pos-cart');
	const columns = useObservableEagerState(uiSettings.columns$);
	const t = useT();
	const { line_items, fee_lines, shipping_lines } = useCartLines();

	/**
	 * @TODO - add sorting?
	 * @NOTE - this a slight different format than the other data tables
	 */
	const mapItems = React.useCallback((items, type) => {
		return items.map((item) => ({
			item,
			uuid: getUuidFromLineItemMetaData(item.meta_data),
			type,
		}));
	}, []);

	/**
	 *
	 */
	const lines = React.useMemo(() => {
		return [
			...mapItems(line_items, 'line_items'),
			...mapItems(fee_lines, 'fee_lines'),
			...mapItems(shipping_lines, 'shipping_lines'),
		];
	}, [mapItems, line_items, fee_lines, shipping_lines]);

	/**
	 *
	 */
	const context = React.useMemo<TableContextProps<CartLine>>(() => {
		return {
			columns: columns.filter((column) => column.show),
			// sort: ({ sortBy, sortDirection }) => {
			// 	setQuery('sortBy', sortBy);
			// 	setQuery('sortDirection', sortDirection);
			// },
			// sortBy: query.sortBy,
			// sortDirection: query.sortDirection,
			headerLabel: ({ column }) => getUILabel(column.key),
		};
	}, [columns, getUILabel]);

	/**
	 *
	 */
	const renderItem = React.useCallback((props) => {
		let Component = TABLE_ROW_COMPONENTS[props.item.type];

		// If we still didn't find a component, use LineItemRow
		if (!Component) {
			Component = LineItemRow;
		}

		return (
			<ErrorBoundary>
				<Component index={props.index} {...props.item} />
			</ErrorBoundary>
		);
	}, []);

	/**
	 *
	 */
	return (
		<Table<CartLine>
			data={lines}
			// estimatedItemSize={46}
			renderItem={renderItem}
			context={context}
			ListEmptyComponent={<EmptyTableRow message={t('Cart is empty', { _tags: 'core' })} />}
		/>
	);
};

// export default React.memo(CartTable);
export default CartTable;