import { useQuery } from 'react-query';
import { fetchWrapper } from 'utils/serviceUtils';
import { getDataServiceUrl } from 'config/endpoints'

/**
* @function {{ properCase name }}Service This function will call the API end point using useQuery from react-query
* @description This function takes an object as parameter which consists of following keys
*
* @param {Object} props An object containing props related to query an API endpoint
* @param {Object} props.options anything you want to pass as headers to API end point 
* @param {Object} props.config in case you want to configure react-query's useQuery
* @param {Function} props.Component any component you want to return with result from API
*
*@return - This function will return a component with API response as props to this component
**/

const {{ properCase name }}Service = ({ options, config, Component, isMock}) => {
 const apiEndpoint = getDataServiceUrl('{{lowerCase name}}', isMock )
 const result = useQuery({
   queryKey: ['{{ properCase name }}'],
   queryFn: () => fetchWrapper(apiEndpoint, options),
   ...config,
 })

return  <Component {...result} />
};


/**
* @function use{{ properCase name }}Service This function will call the API end point using useQuery from react-query
* @description This is a hook, which will make parent component rerender multiple times based on the state e.g isLoading, data, error
* This function takes an object as parameter which consists of following keys
*
* @param {Object} props An object containing props related to query an API endpoint
* @param {Object} props.options anything you want to pass as headers to API end point 
* @param {Object} props.config in case you want to configure react-query's useQuery
*
*@return - This function will return API end point response with different states
**/

export const use{{ properCase name }}Service = ({  options, config, isMock }) => {
const apiEndpoint = getDataServiceUrl('{{lowerCase name}}', isMock )
  return useQuery({
     queryKey: ['{{ properCase name }}'],
     queryFn: () => fetchWrapper(apiEndpoint, options),
     ...config
   });
}

export default {{ properCase name }}Service;