import { FC } from 'react';
import { useQuery } from 'react-query';
import { request, gql } from 'graphql-request';
import { defaultPropTypes, APIResponse } from './types/common';
import { getGraphQlServiceUrl } from 'utils/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 {String} props.endpoint 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> = ({  query , config, renderWithResult, isMock}) => {
 const apiEndpoint = getGraphQlServiceUrl('{{lowerCase name}}', isMock )
 const result: APIResponse = useQuery('{{ properCase name }}', async () => {
    const result = await request(
      apiEndpoint,
      gql`
       ${query}
      `
    );
    return result;
  },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 {String} props.endpoint API end point
* @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, query, isMock }: defaultPropTypes) => {
const apiEndpoint = getGraphQlServiceUrl('{{lowerCase name}}', isMock )
  return useQuery('{{ properCase name }}', async () => {
    const result = await request(
      endpoint,
      gql`
       ${query}
      `
      );
    return result;
  }, config);
}


export default {{ properCase name }}Service;