import { useQuery } from 'react-query';

import Stack from '@material-hu/mui/Stack';

import Spinner from '@material-hu/components/design-system/ProgressIndicators/Spinner';

import { getDynamicForm } from 'src/services/dynamicFormsService';
import { convertDynamicFormSectionsToSurveySections } from 'src/utils/dynamicForms';

import { type SurveySetupScreenProps } from './types';
import SurveySetupScreen from '.';

const SurveySetupScreenProvider = ({
  dynamicFormData,
  title,
  onClose,
}: Omit<SurveySetupScreenProps, 'sections'>) => {
  const dynamicFormQuery = useQuery({
    queryKey: ['dynamicForm', dynamicFormData?.formTag],
    queryFn: () => getDynamicForm(dynamicFormData?.formTag || ''),
  });

  const sections = convertDynamicFormSectionsToSurveySections(
    dynamicFormQuery.data?.data?.sections || [],
    'Empty',
  );

  if (dynamicFormQuery.isLoading) {
    return (
      <Stack
        sx={{
          height: '100vh',
          width: '100%',
          justifyContent: 'center',
          alignItems: 'center',
        }}
      >
        <Spinner />
      </Stack>
    );
  }

  return (
    <SurveySetupScreen
      title={title}
      dynamicFormData={dynamicFormData || {}}
      onClose={onClose}
      sections={sections}
    />
  );
};

export default SurveySetupScreenProvider;