import React from 'react';
import { ROUTE_MONITOR_OWNERSHIP } from 'src/constants';
import { useRouteParams } from 'src/utils/route';
import Orders from './components';
import Jobs from './components/jobs';
import { DEFAULT_SORT_DIR_MONITOR_PAGE } from './constants';
import type { MonitorRouteParams } from './types';
import type { QueryParamsConfig } from '@theorchard/suite-frontend';

export const CLASSNAME = 'MonitorOwnershipPage';

const PAGE_QUERY_PARAMS: QueryParamsConfig = {
    showBy: { name: 'showBy', type: 'string' },
    selectedTerritory: { name: 'territory', type: 'string' },
    selectedStore: { name: 'storeId', type: 'string' },
    selectedOrder: { name: 'orderId', type: 'string' },
    selectedStatus: { name: 'status', type: 'string' },
    selectedEntity: { name: 'entity', type: 'string' },
    selectedCreatedBy: { name: 'createdBy', type: 'string' },
    selectedProductType: { name: 'productType', type: 'string' },
    orderBy: { name: 'orderBy', default: 'createdAt', type: 'string' },
    orderDir: {
        name: 'orderDir',
        default: DEFAULT_SORT_DIR_MONITOR_PAGE,
        type: 'string',
    },
};

const MonitorOwnershipPage = () => {
    const [params, setParams] = useRouteParams<MonitorRouteParams>(
        ROUTE_MONITOR_OWNERSHIP,
        { queryParams: PAGE_QUERY_PARAMS }
    );
    const { showBy } = params;

    return (
        <div className={CLASSNAME}>
            {(!showBy || showBy === 'orders') && (
                <Orders params={params} handleParams={setParams} />
            )}
            {showBy === 'jobs' && (
                <Jobs params={params} handleParams={setParams} />
            )}
        </div>
    );
};

export default MonitorOwnershipPage;