import React from 'react';
import { ROUTE_MONITOR_AUDIO } from 'src/constants';
import { useRouteParams } from 'src/utils/routes';
import { DEFAULT_SORT_DIR_MONITOR_PAGE } from './constants';
import Orders from './orders';
import Products from './products';
import type { MonitorRouteParams } from './types';
import type { QueryParamsConfig } from '@theorchard/suite-frontend';

export const CLASSNAME = 'MonitorPage';

const PAGE_QUERY_PARAMS: QueryParamsConfig = {
    showBy: { name: 'showBy', type: 'string' },
    selectedOrder: { name: 'orderId', type: 'string' },
    selectedStore: { name: 'store', type: 'string' },
    deliveryType: { name: 'deliveryType', type: 'string' },
    orderBy: { name: 'orderBy', default: `createdAt`, type: 'string' },
    orderDir: {
        name: 'orderDir',
        default: `${DEFAULT_SORT_DIR_MONITOR_PAGE}`,
        type: 'string',
    },
};

const MonitorPage = () => {
    const [params, setParams] = useRouteParams<MonitorRouteParams>(
        ROUTE_MONITOR_AUDIO,
        { queryParams: PAGE_QUERY_PARAMS }
    );

    const { showBy } = params;

    return (
        <div className={CLASSNAME}>
            {!showBy && <Orders params={params} handleParams={setParams} />}
            {showBy === 'products' && (
                <Products params={params} handleParams={setParams} />
            )}
        </div>
    );
};

export default MonitorPage;