import { FC } from 'react';
import { useQuery } from 'react-query';
import { fetchWrapper } from 'utils/serviceUtils';
import { defaultPropTypes, APIResponse } from './types/common';
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.renderWithResult will call function passed from Parent component
* @param {Boolean} props.isMock if you want to get mocked data
*
* @return - This function will return a component with API response as props to this component
**/

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

 return renderWithResult(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
* @param {Boolean} props.isMock if you want to get mocked data
*
* @return - This function will return API end point response with different states
**/

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

export default {{ properCase name }}Service;