import React, { useContext } from 'react';
import { withRouter } from 'react-router-dom';
import { TYPE_PRODUCT, TYPE_PROJECT } from 'src/constants/catalog';
import IdentityContext from 'src/context';
import queries from 'src/queries';
import { formatMessage } from 'src/utils';
import hooks from 'src/utils/hooks';
import GlobalSearch from './global-search';
import useHandleSelect from './use-handle-select';
import type { RouteComponentProps } from 'react-router-dom';

interface OwnProps {
    autoFocus?: boolean;
    idPrefix?: string;
    idSequence?: () => number;
    setActive?: (active: boolean) => void;
    isSpaPage?: boolean;
}

type Props = OwnProps & RouteComponentProps;

const WorkstationGlobalSearch: React.FC<Props> = ({
    autoFocus,
    idPrefix,
    idSequence,
    history,
    setActive,
    isSpaPage = false,
}) => {
    const { identity } = useContext(IdentityContext);

    const searchFn = queries.createGlobalSearchQuery({ identity });
    const [doSearch, { loading, data, error, query }] =
        hooks.useLazyRequest(searchFn);

    const handleSelect = useHandleSelect({
        history,
        setActive,
        isSpaPage,
    });

    return (
        <GlobalSearch
            autoFocus={autoFocus}
            idPrefix={idPrefix}
            onSelect={handleSelect}
            onSearch={doSearch}
            loading={loading}
            options={data}
            queryId={query?.queryId}
            error={!!error}
            categories={[TYPE_PROJECT, TYPE_PRODUCT]}
            formatMessage={formatMessage}
            idSequence={idSequence}
        />
    );
};

export default withRouter(WorkstationGlobalSearch);