import React from 'react';
import { useNavigate } from 'react-router-dom';
import { useQuestionnaireServiceContext } from '../../../../services';
import { AppHeader, LoincSearch } from '../../../../components';

const QuestionnaireSearchPage: React.FC = () => {
    const navigate = useNavigate();
    const { setUnsaved } = useQuestionnaireServiceContext();

    const handleSelectItem = (data: any) => {
        if (data.type === 'questionnaire') {
            const { id, ...questionnaire } = data.item;

            navigate(`../new/${id || data.item.code}`, {
                relative: 'path',
                state: {
                    questionnaire: null,
                    template: null
                }
            });
        }
    };

    return (
        <>
            <AppHeader onBack={() => navigate('..', { relative: 'path', state: { returningFromDetail: true, formsTab: 'clinical' } })}/>

            <div style={{ padding: 16, height: 'calc(100% - 68px)', overflow: 'hidden', maxWidth: 800, margin: '0 auto' }}>
                <LoincSearch label="questionnaire templates"
                             type="questionnaire"
                             onSelectItem={handleSelectItem}/>
            </div>
        </>
    );
};

export default QuestionnaireSearchPage;